Question

我想在将鼠标悬停在特定类（主题面板）上时更改超链接颜色，当鼠标悬停在自身上时，当前超链接的颜色正在改变。

的 HTML：

<div class="subject-panel">
                    <p>
                    <a href="<?php echo $this->url(
                    array(
                        'controller' => 'books',
                        'action'     => 'customers'
                    ),
                    'default',
                    true) ?>">  users
                    </a>
                </p>
</div>

CSS：

.subject-panel{background-color:#EFEFEF;box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2); height:30px; text-align: center;}
.subject-panel a:hover {color: white;}

Answer 1

在:hover上使用.subject-panel，这样如果您将鼠标悬停在该元素a上，其颜色将会如下所示进行更改：

.subject-panel:hover a,.subject-pannel a:hover {color: white;}

Answer 2

悬停subject-panel包装

时颜色应该会改变

1）subject-panel:hover - 关于悬停事件

2）subject-panel:hover a - 悬停主题小组查找<a>标记

3）subject-panel:hover a:{ color: red;} - 所选儿童的应用风格

<强> know more

Answer 3

只需更新您的css，如下所示

<强> CSS

.subject-panel a:hover, .subject-panel:hover a{
    color: red;
}

CSS：将鼠标悬停在父级上时更改子颜色

3 个答案: