在不同div中的文本悬停时显示图像

我是 HTML 和 CSS 新手，我正在尝试在文本悬停时显示此（库存）图像。

我见过很多例子，当图像是 div 的子级时，这是有效的，但我想让它在 div 之间工作，最好是使用元素的 id。我相信我的 CSS 选择器是正确的，我不确定我想做的事情是否无效。感谢任何帮助，我也愿意接受 JavaScript 解决方案。

编辑：我正在寻找一种解决方案，其中悬停效果仅适用于标签内的“重要文本”。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p> <a id="text1">Important text</a> other text etc </p>

</div>

</div>

</body>

<style>

#fig1 {

opacity: 0.0;

-webkit-transition: all 500ms ease-in-out;

-moz-transition: all 500ms ease-in-out;

-ms-transition: all 500ms ease-in-out;

-o-transition: all 500ms ease-in-out;

transition: all 500ms ease-in-out;

}

#text1:hover + #fig1 {

/* visibility: hidden;

display: none; */

opacity: 1.0;

}

</style>

</html>

精慕HU

浏览 88回答 2

2回答

慕勒3428872

这是一个解决方案。您需要遵循正确的选择器链接#fig1 {     transition: all 500ms ease-in-out;}.textcontainer + .gallerycontainer #fig1 {    opacity: 0;}.textcontainer:hover + .gallerycontainer #fig1 {    opacity: 1;}<div class="textcontainer">      <p> <a id="text1">Important text</a> other text etc </p>    </div>    <div class="gallerycontainer">      <img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>    </div>

慕无忌1623718

希望这可以帮助。<!DOCTYPE html><html>  <head>  </head>  <body>    <div class="textcontainer">      <p> <a id="text1">Important text</a> other text etc </p>    </div>    <div class="gallerycontainer">      <img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>    </div>  </body>  <style>.gallerycontainer {    opacity: 0.0;    filter: alpha(opacity=40);}.textcontainer:hover~.gallerycontainer {    opacity: 1.0;    filter: alpha(opacity=100);}  </style></html>

随时随地看视频慕课网APP