如何使用懸停屬性與其他元素不在父

我想要做的是讓圖像B出現時圖像A是懸停在上面。如何使用懸停屬性與其他元素不在父

下面是我使用的是img.a:hover img.b {opacity:1;}

的問題是..懸停性能這些要素都沒有在同一個父。這是一個jsfiddle。 http://jsfiddle.net/LquGC/

據我所知，它不在同一父母，但我不明白爲什麼CSS這樣設計。有沒有人知道這方面的解決方法？

來源

2014-02-14 little tiny man

可能重複http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-效果是不同的元素 – Jatin

所以我沒有選擇？我希望我的頁面按照我的方式定位，但在元素周圍移動，直到它們是兄弟姐妹嚴重打亂了我的頁面。 –

這是您要尋找的內容http://stackoverflow.com/questions/10983380/how-do-i -change圖像-A-當懸停-過圖像-b-而不-JavaScript的僅-CSS – Jatin

不幸的CSS只會影響兄弟姐妹或孩子。它無法導航到其父母的兄弟姐妹。所以沒有純粹的CSS修復。

以下兩種方法可能適用於您。您可以保留當前的HTML並使用JS來使懸停工作，或更改您的HTML並使用CSS懸停狀態。

HTML reorder fiddle:

HTML：

<div class="wrapper"> 
    <div class="group1"> 
     <img class="a" src="http://imgur.com/Y7Cz2Q3.jpg"> 
     <img class="b" src="http://imgur.com/MMZwSdO.jpg">    
    </div> 
    <div class="group2"> 
     <img class="c" src="http://imgur.com/HHbpx0w.jpg"> 
     <img class="d" src="http://imgur.com/Q9LfCwH.jpg">  
    </div> 
</div>

CSS：

.b, .d { 
    opacity:0; 
    transition: .3s; 
    } 
img {display: block;} 
.wrapper > div {display: inline-block;} 

.group1:hover .b { 
    opacity:1; 
} 

.group2:hover img.d { 
    opacity:1; 
}

JQUERY fiddle:

JS：

$('.a').hover(
    function() { 
     $('.b').css('opacity','1'); 
    }, function() { 
     $('.b').css('opacity','0'); 
}); 
$('.c').hover(
    function() { 
     $('.d').css('opacity','1'); 
    }, function() { 
     $('.d').css('opacity','0'); 
});

CSS：的

.b,.d { 
    opacity: 0; 
}

來源

2014-02-14 01:53:10 badAdviceGuy

如何使用懸停屬性與其他元素不在父

回答

相關問題