将鼠标悬停在段落上时如何更改锚元素的颜色？ [复制]答案

【问题标题】：How can I change the color of an anchor element when hovering over a paragraph? [duplicate]将鼠标悬停在段落上时如何更改锚元素的颜色？ [复制]
【发布时间】：2018-07-05 00:26:00
【问题描述】：

通过将鼠标悬停在元素上来更改元素的颜色

我有以下 HTML

<p class="ItemMenu "><a href="">Inicio</a></p>                  
<p class="ItemMenu "><a href="#">Cadastro</a></p>

和 CSS

.ItemMenu:hover
{
    color:white !important;
    background:#74BAF0;

}

如何让我的鼠标在<p> 内我的<a> 文本是白色的？

【问题讨论】：

.ItemMenu a:hover?
.ItemMenu:hover, .ItemMenu:hover a 如果你想改变 p 和 a 的颜色
是的，目前还不清楚需要更改哪种颜色，我认为它是p 和a（按照目前的编码方式）

标签： html css

【解决方案1】：

要影响一个元素内的另一个元素，可以试试

.ItemMenu:hover a { color: red; }

【讨论】：

【解决方案2】：

.ItemMenu:hover a
{
    color:white !important;
    background:#74BAF0;

}

这应该适合你！

【讨论】：

【解决方案3】：

HTML：

<p class="ItemMenu"><a href="#">On hover over paragraph</a></p>
<p class="ItemMenu2"><a href="#">On hover over link</a></p>

CSS：

p.ItemMenu:hover
{
    color: black;
    background: #74BAF0;
}

p.ItemMenu:hover a
{
    color: black;
}

p.ItemMenu2 a:hover
{
    color: black;
    background: #74BAF0;
}

https://codepen.io/anon/pen/oprPYR

但是如果你想在悬停a之后改变p的背景......不，你不能这样做-尝试使用JS来做到这一点

【讨论】：