如何在鏈接中選擇強標記並在懸停時更改顏色

Question

我確定這非常簡單，但我無法弄清楚如何操作，也沒有找到相關幫助。

我有一個鏈接。鏈接中的一些文本位於<strong>標記內。 <strong>文字有一種顏色。在懸停時，<strong>文字不會改變顏色。我如何讓它改變顏色？

a:link { 
    color: rgb(25, 50, 50); 
    text-decoration: none; 
} 

a:visited { 
    color: rgb(25, 50, 50); 
    text-decoration: none; 
} 

a:hover { 
    color: rgb(100, 200, 200); 
    text-decoration: none; 
} 

a:active { 
    color: rgb(100, 200, 200); 
    text-decoration: none; 
} 

strong { 
    color: rgb(50, 100, 100); 
} 

<li><a href="xyz.html"><img src="resources/logo.jpg"><div class="list_text"><strong>Heading</strong><br>Sub heading</div></a></li> 

我想strong標籤內的文本上懸停，並積極爲彩色爲「副標題」文本RGB（100200200）相同。

Answer 1

試試這個：

a:link { color:rgb(25,50,50); text-decoration:none; } 
 
a:visited { color:rgb(25,50,50); text-decoration:none; } 
 
a:hover strong { color:rgb(100,200,200); text-decoration:none; } 
 
a:hover { color:rgb(100,200,200); text-decoration:none; } 
 
a:active { color:rgb(100,200,200); text-decoration:none; } 
 

 
strong { color:rgb(50,100,100); }

<a href="xyz.html"><strong>Heading</strong><br>Sub heading</a>

Answer 2

a:hover { 
    color: rgb(100, 200, 200); 
} 

a:hover strong { 
    color: rgb(100, 200, 200); 
} 

或

a:hover, 
a:hover strong { 
    color: rgb(100, 200, 200); 
} 

的jsfiddle演示：https://jsfiddle.net/b0nrf70p/1/

Answer 3

您可以修改現有的懸停選擇，包括與a:hover, a:hover > strong

強元素

a:link { 
 
    color: rgb(25, 50, 50); 
 
    text-decoration: none; 
 
} 
 

 
a:visited { 
 
    color: rgb(25, 50, 50); 
 
    text-decoration: none; 
 
} 
 

 
a:hover, a:hover > strong { 
 
    color: rgb(100, 200, 200); 
 
    text-decoration: none; 
 
} 
 

 
a:active { 
 
    color: rgb(100, 200, 200); 
 
    text-decoration: none; 
 
} 
 

 
strong { 
 
    color: rgb(50, 100, 100); 
 
}

<a href="xyz.html"><strong>Heading</strong><br>Sub heading</a>

Answer 4

https://codepen.io/Czeran/pen/zdZeGx

a>strong:hover {color: red;} 

Answer 5

Strong element有上下文的含義，因此它具有默認風格「瀏覽器用戶代理樣式表」的順序重要。

解決方案是使用Cascading Style Sheets (CSS)級聯設計來定義元素和重寫樣式。我使用級聯路徑「一個強大的」和值「inherit」從父元素中獲取值。

這裏是preview和代碼：

a { 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
a strong { 
 
    color: inherit; 
 
    font-weight: inherit; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    color: rgb(25, 50, 50); 
 
} 
 

 
a:hover, 
 
a:active { 
 
    color: rgb(100, 200, 200); 
 
} 
 

 
strong { 
 
    color: rgb(50, 100, 100); 
 
}

<a>anchor <strong>strong</strong></a>

我希望它能幫助。