如何将:hover应用于元素

Question

我希望可以通过悬停在不同的对象上，远程应用悬停状态。但是我想要命名已启用其悬停状态的对象，而不是通过DOM关系与被悬停对象相关联。

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

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

我还没有找到一种JavaScript或jQuery方法，可以让你远程应用悬停伪类效果于一个元素（即独立于它实际被悬停的状态）。有什么办法可以实现这个效果吗？

- Damon

Answer 1

http://sandbox.phpcode.eu/g/3304b

<style> 
img:hover,img.hovered {border: 5px red solid;} 
</style> 
<ul>
   <li id="hover-over-me">Dogs</li>
</ul> 
<img src="http://4.bp.blogspot.com/_7VyEDKFMA2U/TOX9ZL7KRPI/AAAAAAAAACM/-XSoYjePBPk/s1600/cute-puppy-dog-wallpapers.jpg" /> 
<script> 
$("li").mouseenter(function(){ 
   $("img").addClass('hovered'); 
}); 

$("li").mouseout(function(){ 
   $("img").removeClass('hovered'); 
}); 


</script>

- genesis

---

不会触发 CSS 悬停效果。 - user113716

为什么人们会投票支持这个？ - David Murdoch

我知道如何将类添加到项目和悬停功能，我想应用伪类:hover，但我不认为这是可能的，这太糟糕了。 - Damon

Answer 2

如果你特指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来选择相关元素，并通过内联样式或者添加一个提供适当样式的类来设置样式。

- user113716

---

那么我猜我的问题的简短回答是“你不能”？:p - Damon

@Damon：如果你的意思是从JavaScript触发:hover CSS伪选择器，那么不幸的是，你不能这样做。但是你可以在JavaScript中定义鼠标事件处理程序并触发它们。 - user113716

是的，那就是我想说的。我知道如何添加/删除类，但希望能以更简单直接的方式完成。 - Damon

是否可能以类似于Chrome Web Inspector（14及以上版本）中的“切换元素状态”功能的方式“强制”伪选择器？以下是相关的更改集：http://trac.webkit.org/changeset/90397/trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js。或者只是在检查器中添加类，然后隐藏它们？ - peterjmag

@peterjmag：我还没有听说过在当前标准中强制它的任何方式。那个WebKit的变更集似乎是内部的，但不确定。 - user113716