当我们悬停任何东西时影响其他元素答案

【问题标题】：Affect other elements when we hover anything当我们悬停任何东西时影响其他元素
【发布时间】：2023-03-21 10:30:01
【问题描述】：

我有两张图片，第一张图片是隐藏的，当我们悬停第二张图片时，第一张图片应该是可见的。代码和类名是这样的：

<div class="entrycontent">
<p>
<a>
<img class="alignnone size-full wp-image-48" src="path" />
</a>
<a>
<img class="alignnone size-full wp-image-42" src="path" />
</a>
</p>
</div>

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

如果允许您更改标记，则可以对两个图像使用相同的父级。

html:

<div class="entrycontent">
<p>
<a>
  <img class="alignnone size-full wp-image-48" src="path" />
  <img class="show-on-hover alignnone size-full wp-image-42" src="path" />
</a>
</p>
</div>

css:

a .show-on-hover {
  display: none;
}

a:hover .show-on-hover {
  display: block;
}

DEMO

如果无法更改标记，则需要使用 JavaScript。

【讨论】：

【解决方案2】：

  .wp-image-42:hover +.wp-image-48 { display: block; }

试试这个。我不确定。这只是我的想法。我希望它会正常工作。祝你取得好成绩

请参考此小提琴以获得许可

http://jsfiddle.net/daFDn/4/

【讨论】：

【解决方案3】：

您必须将 HTML 结构更改为以下内容：

<div class="entrycontent">
<p>
<a>
 <img class="alignnone size-full wp-image-48" src="path" />
 <img class="alignnone size-full wp-image-42" src="path" />
</a>
</p>
</div>

和样式：

.entrycontent img.wp-image-48
{
  display: none;
}

.entrycontent a:hover img.wp-image-48
{
  display: block;
}

这必须有效

【讨论】：