JQuery - 當鼠標懸停在另一個div上時較暗的div

我想要類似this link的東西。如果用戶懸停頁眉部分頁面的其他部分會比正常情況下更暗。這裏是我的代碼：JQuery - 當鼠標懸停在另一個div上時較暗的div

的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。

有什麼建議嗎？

來源

2016-02-19 AFN

_ 「我想是這樣」 _你嘗試過什麼？ – guest271314

將主體背景顏色設置爲黑色，並更改懸停和鼠標事件中黃色div的不透明度。 –

將主體的背景顏色設置爲黑色（或覆蓋黑色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/

來源

2016-02-19 20:20:42

你可以這樣做只是改變了顏色，但你可以嘗試用不透明玩了。使用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"); 
    }) 
};

正如你可以看到懸停（）有兩個功能，第一個是做什麼的鼠標懸停和第二，如果當鼠標離開。我使用你發佈的代碼中的類只是改變「generalHeader」和「黃色」來滿足你的需求。

現在你也可以做到這一點添加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");   
     }) 
    };

來源

2016-02-19 20:24:29 epinal

您可以使用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>

來源

2016-02-19 20:35:46 guest271314

JQuery - 當鼠標懸停在另一個div上時較暗的div

回答

相關問題