Question

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

Answer 1

~~仅使用CSS无法完成。~~ some ways of doing this有-- DEMO --，但对于可用的跨浏览器支持并不确定。

如果您希望在悬停ImageA时在ImageB上进行动画，则需要jQuery。

你在悬停时提到CSS动画。因此，我假设你对psuedo状态有不同的风格？：

.imageA:hover
{
   //styles
}

这可以改为：

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

现在，您可以使用jQuery将hoverAnimation类应用于ImageB，同时将鼠标悬停在ImageA上：

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

Answer 2

这在CSS中是绝对可能的，只要B可以定位在A以下（如果A和B是兄弟姐妹，或者B在容器中是A的兄弟）。换句话说，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来操纵类名。

Answer 3

编辑解决所请求的问题（感谢Curt）：

$(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 4

为A和B创建类，然后使用jQuery addClass()选项

在悬停时应用此类

CSS：从一个元素到另一个元素的链接效果

4 个答案: