悬停 div 以显示另一个 div

Question

知道如何让它工作吗？

CSS:

.otherDiv {
  opacity: 0;
}

.innerDiv:hover + .otherDiv {
  opacity: 1;
}

HTML

<div id="container">

  <div class="outerDiv">
    <div class="innerDiv">
      <h4>Show content</h4>
    </div>
  </div>

  <div class="otherDiv">
    <p>Hello World</p>
  </div>

</div>

基本上我希望仅当您将鼠标悬停在 innerDiv 上时才显示 otherDiv。

这是一个 fiddle 我当前的代码：http://jsfiddle.net/4ghws6wz/

Answer 1

尝试定位外部 div：

http://jsfiddle.net/4ghws6wz/1/

.otherDiv {
  opacity: 0;
}

.outerDiv:hover + .otherDiv {
  opacity: 1;
}

Answer 2

你不能用 CSS 做到这一点，但是

您可以尝试使用 jQuery，请参阅 fiddle :https://jsfiddle.net/nileshmahaja/4ghws6wz/3/

$(".innerDiv").mouseover(function(){
  $(this).parent().siblings().css('opacity', 1);
});
$(".innerDiv").mouseout(function(){
   $(this).parent().siblings().css('opacity', 0);
});

或

$(".innerDiv").mouseover(function(){
    $(".otherDiv").css('opacity', 1);
});
$(".innerDiv").mouseout(function(){
    $(".otherDiv").css('opacity', 0);
});

CSS Selector Documentation : http://www.w3.org/TR/css3-selectors/#selectors, http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Answer 3

使用jquery:

$(document).ready(function(){
    $(".innerDiv").hover(function(){
        $(".otherDiv").css("opacity", 1);
    })

    $(".innerDiv").mouseleave(function(){
        $(".otherDiv").css("opacity", 0);
    })
})

在 jsfiddle 上：http://jsfiddle.net/4ghws6wz/4/

悬停 div 以显示另一个 div

hover div to show another div

html

css

css-selectors