如何应用:悬浮在元素上

How to apply :hover to an element

本文关键字：悬浮 元素 何应用 应用      更新时间：2023-09-26

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

<style>
img:hover {border: thin red solid;}
</style>
<li id="hover-over-me">Dogs</li>
<img src="dog.jpg" />

我还没有找到一个javascript或jquery方法，允许你应用悬停伪类效果到一个元素远程(即独立于它实际上是悬停)。有办法做到这一点吗?

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>

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

相关文章：