CSS：从一个元素链接到另一个元素

Question

我有图像A和图像B.它们位于页面上的不同位置。当鼠标悬停在图像A上时，会附上一个css动画。我想附加并触发相同的动画的图像B，当悬停在图像答：是否有可能与CSS？我应该更好地使用jQuery吗？如果jQuery如何触发元素上的css动画？

Answer 1

这不可能是徘徊该类用CSS完成。有some ways of doing this，但不支持可用的跨浏览器支持。

如果希望在ImageB上悬停ImageA时发生动画，则需要使用jQuery。

您在悬停时提及CSS动画。因此，我假定你的意思了伪状态？：

.imageA:hover 
{ 
    //styles 
} 

不同风格这可改为：

.imageA:hover, .hoverAnimation 
{ 
    //styles 
} 

现在你可以将hoverAnimation类ImageB而使用jQuery悬停在ImageA：

$(function(){ 
    $("img.imageA").hover(function(){ 
    $("img.ImageB").addClass("hoverAnimation"); 
    } 
    ,function(){ 
    $("img.ImageB").removeClass("hoverAnimation"); 
    }); 
}); 

-- DEMO --

Answer 2

编辑处理要求的问题（与感谢科特）：

$(document).ready(function(){ 
    function mouseoverHandler(e){ 
     $(image B).addClass('animate-result-class'); 
     $(image A).one('mouseout', mouseoutHandler); 
    } 

    function mouseoutHandler(e){ 
     $(image B).addClass('animate-result-class'); 
     $(image A).one('mouseover', mouseoverHandler); 
    } 
    $(image A).one('mouseover', mouseoverHandler); 
}); 

Answer 3

创建A和B类则适用于使用jQuery addClass()选项

Answer 4

Ť只要B可以定位在A以下（如果A和B是兄弟姐妹，或者B位于A的兄弟容器中），则他在CSS中是完全可能的，。。换句话说，img.A需要位于img.B的CSS选择器中。

喜欢的东西：

/* if A is immediately preceded by B */ 
img.A:hover {...} 
img.A:hover + img.B {...} 

/* if A is later preceded by B (same parent element) */ 
img.A:hover {...} 
img.A:hover ~ img.B {...} 

/* if B is in a container that is a sibling of A */ 
img.A:hover {...} 
img.A:hover ~ div.container img.B {...} 

这里有一个演示：http://jsfiddle.net/rgthree/GE7UP/

这些选择不会在IE6工作，但由于您使用的CSS动画，我怀疑你关心:)现在，如果img.B不能定位在img.A以下，那么你需要使用Javascript来操作类名。