CSS：從一個元素鏈接到另一個元素

我有圖像A和圖像B.它們位於頁面上的不同位置。當鼠標懸停在圖像A上時，會附上一個css動畫。我想附加並觸發相同的動畫的圖像B，當懸停在圖像答：是否有可能與CSS？我應該更好地使用jQuery嗎？如果jQuery如何觸發元素上的css動畫？CSS：從一個元素鏈接到另一個元素

來源

2012-04-02 Alexander Savin

聽起來好像可以用CSS完成，但是你可以發佈一些標記，以便我們可以看到你想要做什麼？ – 2012-04-02 14:54:34

如果元素B嵌套在元素A中，則可以這樣做，但如果元素完全不相交，我不認爲可以。 – Blazemonger 2012-04-02 14:54:57

~~這不可能是徘徊該類用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 --

來源

2012-04-02 14:59:28 Curt

謝謝，這就像一個魅力工作！ – 2012-04-02 15:11:25

謊言！只要A和B至少是兄弟姐妹（或者包含在A的同胞中），就可以完全用CSS完成。請參閱下面的答案。 – rgthree 2012-04-02 15:12:39

編輯處理要求的問題（與感謝科特）：

$(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); 
});

來源

2012-04-02 14:54:28 devstruck

OP已經要求B上的動畫，當徘徊時A – Curt 2012-04-02 14:55:43

@Curt：絕對正確。已編輯適當。 – devstruck 2012-04-02 15:02:44

創建A和B類則適用於使用jQuery addClass()選項

來源

2012-04-02 14:55:00

Ť只要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來操作類名。

來源

2012-04-02 15:11:30 rgthree

這也很酷，謝謝你的提示！ – 2012-04-02 15:12:31

@rgthree你有沒有工作的例子？（jsfiddle） – Curt 2012-04-02 15:15:06

@Curt當然，我也將它添加到上面：http：// jsfiddle。net/rgthree/GE7UP/ – rgthree 2012-04-02 15:21:50

CSS：從一個元素鏈接到另一個元素

回答

相關問題