如何将 :hover 应用于元素

发布于 2024-12-03 20:11:57 字数 313 浏览 4 评论 0原文

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

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

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

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

原文

I want to apply the hover state remotely, by hovering on a different object. But I want to name the object that has its hover activated rather than have it be by DOM relationship to the item being hovered over.

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

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

I haven't found a javascript or jquery method that allows you to apply the hover pseudo-class effect to an element remotely (ie independently of it actually being hovered). Is there a way to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍风燃霜 2024-12-10 20:11:57

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>

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>

回复收藏 0 原文

无畏 2024-12-10 20:11:57

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

If you mean specifically the CSS :hover pseudo selector, then one element can only trigger it on another insofar as a relationship can be established in CSS:

http://jsfiddle.net/tFSWt/

example as siblings:

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

example as ancestor/descendant:

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

Otherwise you'll need to rely on JavaScript to select the related element and set the style on either by inline styling, or by adding a class that provides the appropriate style.

回复收藏 0 原文

~没有更多了~