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>

Теперь моя страница взгляд любит это:

Я хочу желтого раздела будет темнее, если пользователь парить на общийHeader.

Любое предложение?

источник

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

ответ

Смежные вопросы