CSS：錨鏈接懸停不起作用

我想要的是，當我將鼠標懸停在錨元素上時，應該應用懸停類。但它似乎不起作用。 h1元素位於錨元素內部。所以我必須使用a h1:hover選擇h1元素，那麼只有這個類正在被應用。 唯一值得關注的是當我將顏色應用到h1時，懸停停止工作，否則它運行良好。我不知道爲什麼會發生這種情況。任何人都可以請幫忙嗎？謝謝。 Code pen to play CSS：錨鏈接懸停不起作用

HTML：

<a href=""> 
    <h1>This will not work on hover</h1> 
</a>

CSS：

a, a:link{ 
    color: teal; 
} 
a:hover{ 
    color: salmon; 
} 

h1{ 
    color: magenta; 
} 
/* a h1:hover{ 
    color: salmon; 
} */

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover{ 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href=""> 
 
    <h1>This will not work on hover</h1> 
 
</a>

來源

2016-12-29 Hitesh Kumar

爲什麼downvote我錯過服用點？ –

我不認爲你錯過了什麼，這個問題似乎有效，不需要被降低效率 –

CSS特異性不能像你想象的那樣工作。

你可以閱讀更多關於此這裏：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

關於你的問題，你可以改變：

a:hover{ 
    color: salmon; 
}

到

a:hover h1{ 
    color: salmon; 
}

，也將努力爲上述選擇更具體來自：

h1{ 
    color: magenta; 
}

，因此當a被徘徊時，它將覆蓋它。

最終的HTML/CSS爲您測試什麼，我說：

<a href=""> 
    Anchor Text 
    <h1>Heading Text</h1> 
</a>

和

a, a:link{ 
    color: teal; 
} 
a:hover{ 
    color: salmon; 
} 

a:hover h1{ 
    color: yellow; 
} 

h1{ 
    color: magenta; 
}

來源

2016-12-29 10:37:14

你的意思是當我們在h1 {}中設置顏色時，它具有更高的特異性，然後a：hover {}。 –

'a'和'h1'是具有不同顏色屬性的2個不同元素。通過引用'h1'的顏色，你實際上覆蓋了'h1'所具有的默認'color：inherit'並且指定了你自己的顏色。您需要通過擴展選擇器來覆蓋h1的顏色來準確指定h1顏色何時發生更改。 –

Gotcha。謝謝。 –

試試這個

demo

CSS

a, a h1:link{ 
    color: teal; 
} 
a h1:hover{ 
    color: salmon; 
} 

h1{ 
    color: magenta; 
} 
/* a h1:hover{ 
    color: salmon; 
} */

來源

2016-12-29 10:34:45 falguni

試試這個

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover h1 { 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
}

<a href="#"> 
 
    <h1>This will not work on hover</h1> 
 
</a>

來源

2016-12-29 10:36:09

你丟失了一些#另外，我還添加了一個CSS

a:hover h1{ 
color: salmon; 
}

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover{ 
 
    color: salmon; 
 
} 
 

 
a:hover h1{ 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href="#"> 
 
    <h1>This will not work on hover</h1> 
 
</a>

來源

2016-12-29 10:36:18

嘗試：

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover h1 { 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href=""> 
 
    <h1>This will not work on hover</h1> 
 
</a>

希望這有助於！

來源

2016-12-29 10:36:30

CSS：錨鏈接懸停不起作用

回答

相關問題