代码之家 › 专栏 › 技术社区 › Markeee

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

css

Markeee · 技术社区 · 8 年前

我确信这真的很容易,但我不知道怎么做,也不知道在搜索时如何找到帮助。

我有一个链接。链接中的一些文本位于 <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(100200200)的颜色相同。

5 回复 | 直到 8 年前

North-Wind 8 年前

试试这个:

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>

Miguel 8 年前

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

https://jsfiddle.net/b0nrf70p/1/

j08691 8 年前

您可以修改现有的悬停选择器,将强元素包含在 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>

Czeran 8 年前

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

a>strong:hover {color: red;}

Bruno 8 年前

Strong element

解决方案是使用 Cascading Style Sheets (CSS) 级联设计用于定义元素和重写样式。我使用了级联路径“a strong”和“value” 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);
}