Question

我是JavaScript的新手，我正在尝试编写一个简单的函数来触发多个div悬停。到目前为止，我尝试了很多东西，但我认为这段代码将更接近解决方案。如果有人能帮助我，我会非常感激。

$(function() {
  $(document).on('mouseenter','.Test1', function() {
    if($('.Test2').hasClass('Test2')) {
       $('.Test2').toggleClass('Test2:Hover');
    }
  });
});

.Test1{
    position:relative;
    width:200px;
    height:200px;
    background-color:#951159;
}

.Test1:Hover{
    position:relative;
    width:200px;
    height:200px;
    background-color:#654654;
}

.Test2{
    position:relative;
    width:200px;
    height:200px;
    background-color:#147852;
}

.Test2:Hover{
    position:relative;
    width:200px;
    height:200px;
    background-color:#654654;
}

<div class="Test1">1</div>
<div class="Test2">2</div>

提前致谢。

PS：我知道它只能用CSS完成，但我需要用Javascript。

Answer 1

 $(document).on('mouseenter','.Test1', function() {
    if($('.Test2').hasClass('Test2')) {
       $('.Test2').trigger('mouseover');
}
});

Answer 2

最好使用CSS类。并通过javascript添加和删除它们。

  $(function(){
  //reset box 
    $('.Test1').hover(function() {
        $('.Test2').addClass('hover');
    }, function(){
 	$('.Test2').removeClass('hover');   
    });
  });

.Test1{
    position:relative;
    width:200px;
    height:200px;
    background-color:#951159;
}

.Test1:hover{
    position:relative;
    width:200px;
    height:200px;
    background-color:#654654;
}

.Test2{
    position:relative;
    width:200px;
    height:200px;
    background-color:#147852;
}

.Test2:hover, .Test2.hover{
    position:relative;
    width:200px;
    height:200px;
    background-color:#654654;
}

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="Test1">1</div>
<div class="Test2">2</div>

JS代码将触发多个悬停div

2 个答案: