如何在多个类中使用:hover [英] How can I use :hover with multiple classes

问题描述

我有一个CSS按钮样式和一些预定义的颜色样式.我使用颜色类为事物涂上相同的颜色，并使用按钮样式使按钮变圆.

I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.

如何在按钮上添加悬停样式以将颜色更改为较浅的阴影?我以为它会像.class class2:hover {etc}一样简单，但是由于某些原因而无法正常工作.

How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.

这是我准备演示的小提琴: http://jsfiddle.net/7n4Wy/

Here's a fiddle I prepared to demonstrate: http://jsfiddle.net/7n4Wy/

HTML

<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>

CSS

.red {
    background: red;
}

.blue {
    background: blue;    
}

.button {
    border-radius: 6px;
}

.button:hover .red:hover {
    background: pink;
}

推荐答案

您要尝试匹配的.red:hover即内部 .button:hover，这意味着您的标记中存在嵌套元素.

What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.

由于您选择了相同的元素，因此需要将两个类与单个:hover组合在一起:

Since you're selecting the same element, you need to combine both classes with a single :hover:

.red.button:hover {
    background: pink;
}

更新了小提琴

这篇关于如何在多个类中使用:hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！