悬停跨度时触发 div

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，我试过css和JS但似乎没有任何效果:( 这是一些 css 和我在不同时间尝试过的 Js。

CSS

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

JS:

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

Answer 1

如果你想使用 css，你必须用 div 切换范围的位置，因为 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

不确定您是否想让它在将鼠标移离 span 时消失，但我是这样写的。看看：

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

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

悬停跨度时触发 div

Trigger div when hover span

javascript

css

wordpress