如何申請：將鼠標懸停在元素上

我想通過懸停在不同的對象上來遠程應用懸停狀態。但我想要命名懸停的對象，而不是通過DOM關係來懸停。如何申請：將鼠標懸停在元素上

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

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

我還沒有找到一個JavaScript或jquery的方法，允許你懸停僞類效果遠程應用到的元素（即，獨立於它實際上正在盤旋）。有沒有辦法做到這一點？

來源

2011-09-09 Damon

如果你的意思是明確的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來選擇相關的元素，並將由聯樣式在任一風格，或通過添加一個類，提供適當的風格。

來源

2011-09-09 20:42:11 user113716

所以我想我的q的簡短答案是'你不能'？：p – Damon

@Damon：如果你的意思是觸發來自JavaScript的'：hover' CSS僞選擇器，那麼不幸的是，你不能。但是你可以*在JavaScript中爲鼠標事件定義處理程序並觸發它們。 – user113716

是的..這就是我的意思。我知道添加/刪除類，但希望我能以更直接的方式做到這一點。 – Damon

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>

來源

2011-09-09 19:39:02 genesis

這將無法正常工作：http://jsfiddle.net/ekqCC/1/ –

這不*觸發CSS懸停。 – user113716

爲什麼人們甚至投票呢？ –

如何申請：將鼠標懸停在元素上

回答

相關問題