jQuery.鼠标悬停每个按钮来调整不透明度和显示图像

gblwokeq 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(78)

当鼠标放在每个按钮上时，将调整不透明度并对图像进行编码以显示。将鼠标移到每个当前按钮上会更改相应的图像。但是，调整不透明度时会出现错误。以下是我的代码。注解中的代码不会更改图像。我该怎么解决这个问题？我以前从来没有学过J-Query，所以我参考了一下。所以我才需要帮助。

<!-- 브라우저 실행 : ALT+B -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>second_test</title>
    <!-- <link rel="stylesheet" href="second_web.css">
    <link rel="script" href="second_web.js"> -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function() {
          r(); 
          b();
          c();
        });
        // hover image change
        function r(){
          $('.hz').css('display','none'); $('.r').css('display','block');  $('.r')
        }
        function b(){
          $('.hz').css('display','none'); $('.b').css('display','block');  $('.r')
        }
        function c(){
          $('.hz').css('display','none'); $('.c').css('display','block');  $('.r')
        }
        // hover image opacity 0 -> 1
        // if. food img -> indoor img change
        // > food img(0), imdoor img (1)
        // else if. indoor img -> food img change
        // > food img (1), imdoor img (0)
        // $('.c').fadeIn(500,function(){
        //     $('.hz').css('display','none'); $('.c').css('display','block');
        // });
        </script>
    <style>
        .hz {
            width:800px; height:600px;
        }
        .r {
            background-image: url(./food.jpg);
            background-size: cover;
        } 
        .b {
            background-image: url(./indoor.jpg);
            background-size: cover;
        }
        .c {
            background-image: url(./outdoor.jpg);
            background-size: cover;
        }

    </style>
</head>
<body>
    <a href="./first_web.html">back</a>
    <div class="hz r"></div>
    <div class="hz b"></div>
    <div class="hz c"></div>
    <button onmouseover="r()">food</button>
    <button onmouseover="b()">indoor</button>
    <button onmouseover="c()">outdoor</button>
    
</body>
</html>

字符串
这是我想做的一个功能。
1.鼠标在按钮上改变图像，不改变。
1.我想在图像变化时从透明变为不透明，从而产生平滑的过渡效果。
1.将鼠标从按钮上移开不会更改图像。例如，如果按钮1具有A图像并且按钮2具有B图像，则当按钮2悬停并移除时，图像B保持不变。
buttonhover_img_change_not opacity
Not a smooth transition的

jquery

来源：https://stackoverflow.com/questions/76648813/jquery-mouse-hover-each-button-to-adjust-opacity-and-show-images

1条答案

按热度按时间

1tuwyuhd1#

不知道这是否是你正在寻找的，但这里有一个不同的版本，我相信可能会为你工作。
基本上，您可以创建一个CSS类，并基于mouseover或mouseout在元素中添加/删除它
请参见下面的示例代码

$(document).ready(function() {
  // init: show the first image (under ".r")
  $('.hz').removeClass('show');
  $('.r').addClass('show');

  // when hovering over the button, add the class to show opacity
  $("button").on('mouseover', function() {
    var btnId = $(this).attr("id");
    //    console.log(btnId);
    $('.hz').removeClass('show hover');
    $('.' + btnId).addClass('show hover');

  });

  // when exiting hover mode over the button, remove the class to remove opacity
  $("button").on('mouseout', function() {
    var btnId = $(this).attr("id");
    $('.' + btnId).removeClass('hover');
  });
});

.hz {
  min-width: 350px;
  min-height: 250px;
  border: 1px solid green;
  display: none;
}

.show {
  display: block;
}

.hz:hover, 
.hover {
  opacity: 0.6;
}

.r {
  background-image: url(http://placekitten.com/200/300);
  background-size: cover;
}

.b {
  background-image: url(http://placekitten.com/g/200/300);
  background-size: cover;
}

.c {
  background-image: url(http://placekitten.com/g/200/301);
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="./first_web.html">back</a>
<div class="hz r"></div>
<div class="hz b"></div>
<div class="hz c"></div>
<button id="r">food</button>
<button id="b">indoor</button>
<button id="c">outdoor</button>

赞(0）回复(0）举报 2023-08-04

我来回答

jQuery.鼠标悬停每个按钮来调整不透明度和显示图像

1条答案

相关问题

热门标签

最新问答