Question

在悬停在某个范围内时尝试触发div可见的问题是代码是这样的：

<ul class="products">
<li>
<a href="somelink">
<img src="some image">  
<div class="overlay"> Some Text</div>
</a>
<span class="somebtn">title</span>
</li>
</ul>

当盘旋在跨度时应该触发div，Ive尝试了css和JS但似乎没有任何工作:( 这是一些css和Js Ive在不同的时间尝试过。

CSS

.overlay {
 display:none;
}
span.someBtn:hover + div.overlay {
display:block !important;
}

JS：

$('.someBtn').hover(function() {
    $('.overlay').toggle();
});

Answer 1

如果你想使用css，你已经用div切换了span的位置，因为css没有前一个选择器

.overlay {
  display:none;
  width: 200px;
  height: 200px;
}
span.somebtn:hover + div.overlay {
  display:block ;
  background: red
}

<ul class="products">
  <li>
    <a href="somelink">
      <img src="some image">  
      <span class="somebtn">title</span>
      <div class="overlay"> Some Text</div>
    </a>

  </li>
</ul>

但是如果你想使用jquery，你可以使用

$(".somebtn").hover(function(){
  $(".overlay").show()
},function (){
  $(".overlay").hide()
})

.overlay {
  display:none;
  width: 200px;
  height: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
  <li>
    <a href="somelink">
      <img src="some image">  
      <div class="overlay"> Some Text</div>
      <span class="somebtn">title</span>
      
    </a>

  </li>
</ul>

您也可以使用纯Javascript

function mouseIn(){overlay.style.display = "block"}
function mouseOut(){overlay.style.display = "none"}

var overlay,somebtn;

overlay = document.querySelector(".overlay");
somebtn = document.querySelector(".somebtn");

somebtn.addEventListener("mouseenter",mouseIn,false);
somebtn.addEventListener("mouseout",mouseOut,false)

.overlay{
  width: 200px; 
  height: 200px;
  background: red;
  display: none
}

<ul class="products">
  <li>
    <a href="somelink">
      <img src="some image">  
      <div class="overlay"> Some Text</div>
      <span class="somebtn">title</span>
      
    </a>

  </li>
</ul>

Answer 2

不确定你是否想让鼠标远离跨度时消失，但我是这样写的。看看：

$(".somebtn").hover(function () {
        $(".overlay").show();
    }, function () {
        $(".overlay").hide();
    });

如果你不想让它消失，只需删除第二个功能。

悬停跨度时触发div

2 个答案: