如何申请:悬停在元素上

Question

我想通过将鼠标悬停在另一个对象上来远程应用悬停状态.但是我想命名激活其悬停的对象,而不是通过DOM关系将其悬停在项目上.

<style>
img:hover {border: thin red solid;}
</style>

<li id="hover-over-me">Dogs</li>
<img src="dog.jpg" />

我还没有找到一个javascript或jquery方法,它允许你远程将hover伪类效应应用于一个元素(即独立于它实际上被悬停).有没有办法做到这一点？

Answer 1

如果您特指 CSS:hover伪选择器，那么只要可以在 CSS 中建立关系，一个元素只能在另一个元素上触发它：

http://jsfiddle.net/tFSWt/

以兄弟姐妹为例：

<span>Sibling </span><img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />

img:hover { border: 2px dashed blue; }
span:hover + img { border: 2px dashed blue; }

作为祖先/后代的示例：

<span>Parent 
    <img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
</span>

img:hover { border: 2px dashed blue; }
span:hover img { border: 2px dashed blue; }

否则，您需要依靠 JavaScript 来选择相关元素并通过内联样式或添加提供适当样式的类来设置样式。