錨點中斷tilde

我試圖用tilde來改變另一個元素的不透明度，但是我也需要元素有一個錨點標記，但是這打破了過渡。爲了清除我有2個元素。 #china和#map。當我懸停#china我想#map更改不透明度。這在沒有固定標籤盈方時有效。錨點中斷tilde

CSS：

#china:hover ~ #map { 
    opacity: 0.1; 
}

HTML：

<section id="map-container"> 
    <a href="#article-info-china"><article id="china"></article></a> 
    <article id="map"></article> 
</section>

任何幫助是極大的讚賞。謝謝

來源

2016-11-17 Andreas Eilertsen Lybo

我會說這裏的問題不是波浪線，但事實證明，與ID的元素'錨內china' （''）元素不是元素id爲map的元素的兄弟元素。所以CSS規則根本不會選擇那個元素。 – arkascha

他們不會在您的標記中共享相同的父項，所以這不起作用。你可以把ID放在鏈接上嗎？ –

@HiddenHobbes #China是應該鏈接到另一篇文章的圖像。不知道我應該如何改變它... –

這是正常的行爲。 ~選擇器不會執行該技巧，因爲它試圖在#china之後立即找到#map元素，但情況並非如此。爲了工作，您已經將其他選項設置爲:hover選擇器，如下所示：a:hover ~ #map。

這將選擇#map元素，因爲它恰好位於ancor標籤之後。

但是，您可能不希望在外部#china元素之外產生不透明。

來源

2016-11-17 18:12:39 Chris

謝謝。這通常是破壞我的代碼的簡單事情。 –

哈哈，發生了。歡迎您:) – Chris

a[href$='#article-info-china']用來選擇<a>與href = #article-info-china

a[href$='#article-info-china']:hover ~ #map { 
 
opacity: 0.1; 
 
} 
 

 
#map{ 
 
    
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
}

<section id="map-container"> 
 
    <a href="#article-info-china"><article id="china">hello</article></a> 
 
    <article id="map"></article> 
 
</section>

來源

2016-11-17 18:12:49 mrid

中國是一個形象，否則我只想在 –

裏面有錨標記如果你想用'china'來做這個，最好使用javascript – mrid

對不起，應該指出這是爲了我在網上的第一年項目。我們不允許使用JS。雖然謝謝:) –

錨點中斷tilde

回答

相關問題