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>

我希望悬停和活动时强标记内的文本与'子标题'文本rgb（100,200,200）的颜色相同。

Answer 1

试试这个：

＆＃13;

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); }

＆＃13;

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

＆＃13;

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)级联设计来定义元素和重写样式。我使用级联路径“a strong”和值“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>

我希望它有所帮助。

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

5 个答案: