Question

我试图使用JQuery来检查是否有我的元素在悬停时有一个x类将显示其他div，但是我的代码无法正常工作，不确定我错过了什么。

$(function(){
    if($('.naigation > li').hasClass('x')){
        $('.naigation > li').mouseenter(function(){
        $('#overlay').css('display','block');
        })
    }else if(!$('.naigation > li').hasClass('x')){
        $('#overlay').css('display','none');
        }
    }).mouseout(function(){
        $('#overlay').css('display','none');
    })

感谢您的帮助。

Answer 1

方法1）我们使用mouseleave，所以不需要else if

$(document).ready(function(){
  $('.naigation > li').mouseenter(function(){
    if ( $(this).hasClass('x') )
      $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})

$(document).ready(function(){
  $('.naigation > li').mouseenter(function(){
    if ( $(this).hasClass('x') )
      $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})

ul {
  padding: 0;
}

li {
  border: 2px solid red;
  padding: 5px;
  width: 100px;
  margin: 5px;
  list-style: none;
}

#overlay {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="naigation">
  <li class="x">Have X</li>
  <li>Have not X</li>
</ul>
<div id="overlay">Hello World!</div>

方法2）：使用.naigation > li.x并删除if：

$(document).ready(function(){
  $('.naigation > li.x').mouseenter(function(){
    $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})

$(document).ready(function(){
  $('.naigation > li.x').mouseenter(function(){
    $('#overlay').css('display','block') ;
  }).mouseleave(function() {
    $('#overlay').css('display','none') ;
  });
})

ul {
  padding: 0;
}

li {
  border: 2px solid red;
  padding: 5px;
  width: 100px;
  margin: 5px;
  list-style: none;
}

#overlay {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="naigation">
  <li class="x">Have X</li>
  <li>Have not X</li>
</ul>
<div id="overlay">Hello World!</div>

Answer 2

@Query("{ 'itemIdType': ?0, 'itemId': ?1}")
public List<String> findByItemIdTypeOrItemId(String itemIdType, String itemId);

$(function(){
    $('.naigation > li.x').mouseenter(function(){
        $('#overlay').show();
        })
    .mouseout(function(){
        $('#overlay').hide();
    })
})

#overlay{display:none}
.naigation{width:100%;float:left}
li{display:inline-block;width:100px;height:20px;background:#234;color:white;text-indent:1em;box-sizing:border-box;list-style:none;float:left;border:1px solid yellow}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class='naigation'><li class='x'>has X</li><li class='y'>not have X</li></div>
<div id='overlay'>overlay</div>

如果让class show div else条件使用JQuery

2 个答案: