Question

我想在用户悬停在#b时显示元素#a。页面加载#b将设置为display: none。

<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div> 
</div>

#b { display: none; }
#a:hover #b { display: block; } /* Not Working */
#a:hover > #b { display: block; } /* Not Working */
#a:hover + #b { display: block; } /* Not Working */
#a:hover ~ #b { display: block; } /* Not Working */

我尝试了很多方法，但都没有效果。这是一件非常简单的事情，并没有发生。请帮忙。

Answer 1

不幸的是，由于HTML结构太复杂，你无法单独在CSS中实现所需。 #b元素必须是#a元素的兄弟或子元素。

如果您无法修改HTML，则需要使用JS：

$('#a').hover(function() {
  $('#b').toggle();
});

#b { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div>
</div>

Answer 2

切换显示mouseover和mouseout事件中隐藏元素的类。

＆＃13;

var a = document.getElementById('a'),
    b = document.getElementById('b');

a.addEventListener('mouseover',function() {
  b.classList.add('show');
});

a.addEventListener('mouseout',function() {
  b.classList.remove('show');
});

＆＃13;

#b {
  display: none;
}
#b.show {
  display: block;
}

＆＃13;

<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
</div>

＆＃13;

Answer 3

使用您当前的HTML，这将是唯一的方法。

document.querySelector("#a").addEventListener("mouseover", function() {
  document.querySelector("#b").classList.add("show");
});

document.querySelector("#a").addEventListener("mouseout", function() {
  document.querySelector("#b").classList.remove("show");
});

#b {
  display: none;
}

#b.show {
  display: block;
}

<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
  </div>
</div>

如果您不介意更改HTML，可以选择

li span+img {
  display: none;
}

li span:hover+img {
  display: block;
}

<div>
  <ul>
    <li>
      <span>Hover</span>
      <img src="http://wallpaper-gallery.net/images/image/image-13.jpg">
    </li>
  </ul>
</div>

Answer 4

你可以这样做，但只能在hover容器的#a上，因为它必须是#b容器的兄弟。

此处我已将id="a"移至与#b容器相同的级别，然后选择器就像#a:hover + div #b一样简单。

＆＃13;

#b {
  display: none;
}

#a:hover + div #b {
  display: block;
}

＆＃13;

<div id="a">
  <ul>
    <li>Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div> 
</div>

＆＃13;

Answer 5

当悬停在div A [...]的id元素上时想要显示div B的id元素我在互联网上尝试了很多方法但没有工作。这是一件非常简单的事情，并没有发生。请帮忙。

这是一个vanilla JavaScript示例。希望这会有所帮助。

示例：

a = {x: [y[0] + y[0] if x in b else y[0], y[1]] for x, y in b.items()}

为您制作了CodePen演示，适用于您的html示例。配有独角兽，猫和彩虹。

CodePen演示（内部独角兽）：

http://codepen.io/robee/pen/EWKZjz

悬停在另一个元素上时显示元素

5 个答案: