Javascript 如何应用：悬停到元素

我想通过悬停在不同的对象上远程应用悬停状态。但是我想命名已激活其悬停的对象，而不是通过与悬停项的DOM关系命名它

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

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

img:hover{边框：红色细实体；}
狗

我还没有找到一个javascript或jquery方法，允许您将悬停伪类效果远程应用于元素（即独立于实际悬停的元素）。有办法做到这一点吗？

img:hover，img.hover{边框：5px红色实心；}

狗

$（“li”）.mouseenter（函数（）{
$（“img”）.addClass（“悬停”）；
}); 
$（“li”）.mouseout（函数（）{
$（“img”）.removeClass（“悬停”）；
}); 

如果您具体指的是CSS

：hover

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

例如兄弟姐妹：

兄弟姐妹
img:hover{边框：2px蓝色虚线；}
span:hover+img{边框：2px蓝色虚线；}

作为祖先/后代的示例：

Parent
img:hover{边框：2px蓝色虚线；}
span:hover img{边框：2px蓝色虚线；}

---

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

这不会触发CSS悬停。为什么人们会投票支持这一点？我知道如何向项和悬停函数添加类，我希望应用伪类：hover，尽管我不相信它实际上是可能的，这太糟糕了。所以我猜我的问题的简短答案是‘你不能’？：p@Damon：如果您的意思是从JavaScript触发

：hover

CSS伪选择器，那么不幸的是，您不能。但是你可以在JavaScript中定义鼠标事件的处理程序并触发它们。。这就是我的意思。我知道如何添加/删除类，但希望能以更直接的方式完成。是否有可能以类似于Chrome Web Inspector（版本14及以上）中“切换元素状态”功能的方式“强制”伪选择器？以下是相关的变更集：。或者这仅仅是添加类，然后将它们隐藏在检查器中？@peterjmag：我还没有听说在当前的标准中有任何强制的方法。webkit变更集似乎是内部的，但不确定。

<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>

<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; }