Question

我想要像this link这样的东西。如果用户悬停标题部分页面的另一部分将比正常情况更暗。这是我的代码：

的index.html：

<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script> 
    $(function(){       
      $("#generalHeader").load("header.html"); 
    });
    </script>
</head>
<body cz-shortcut-listen="true">    
    <div id="generalHeader"></div>      
    <div class="yellow">
    </div>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

现在，我的页面看起来像这样：

如果用户将鼠标悬停在 generalHeader 上，我想黄色部分会变暗。

有什么建议吗？

Answer 1

您可以使用css :hover，filter，brightness，transition

section {
  width:300px;
  height:200px;
  background:yellow;
  transition: all 1s;
}

header {
  background: yellow;
  border: 1px solid green;
  width:298px;
  text-align:center;
}

header:hover + section {
  -webkit-filter: brightness(0.8);
  -moz-filter: brightness(0.8);
  filter: brightness(0.8);
}

<header>hover</header>
<section></section>

Answer 2

将正文的背景颜色设置为黑色（或将黄色div叠加在黑色div的顶部），然后在相关事件处理程序中更改黄色div的不透明度。

$(function() {
  $("#generalHeader").hover(function() {
    $(".yellow").stop().fadeTo(1200, .5);
  });

  $("#generalHeader").mouseout(function() {
    $(".yellow").stop().fadeTo(600, 1);
  });
});

https://jsfiddle.net/tonyhinkle/Lmuun72f/

Answer 3

你可以只改变颜色，但也可以尝试使用不透明度。看看使用JQuery：

function headerHover(){
 $("#generalHeader").hover(
    function(){
        // Opacity
        $(".yellow").css("opacity", "0.6");
        // Color
        $(".yellow").css("background-color", "#A8A810");
    }, 
    function(){
        // Return to normal when mouse leave
        $(".yellow").css("opacity", "1");

        $(".yellow").css("background-color", "yellow");
    })
};

正如你所看到的，hover（）有两个函数，第一个是鼠标悬停，第二个是鼠标离开时。我使用了你发布的代码中的类只是改变＆＃34; generalHeader＆＃34;和＆＃34;黄色＆＃34;满足您的需求。

现在你也可以添加一个CSS类：

CSS文件：

.mainHover{
    opacity:0.6;
    bakground-color:#A8A810;
}

JavaScript的：

function headerHover(){
     $("#generalHeader").hover(
        function(){           
            $(".yellow").addClass("mainHover");

        }, 
        function(){
            // Return to normal when mouse leave
            $(".yellow").removeClass("mainHover");          
         })
    };

JQuery - 当悬停在另一个div上时更暗的div

3 个答案: