如何在链接中选择强标记并在悬停时更改颜色

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>

我希望它能帮助。