悬停时的目标文字颜色

Question

我做了一个css按钮，但是当我将鼠标悬停在按钮上时，我无法弄清楚如何将文本颜色更改为白色。

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 

 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

当我增添色彩

a.button1o:hover 

这是行不通的。

我也试过：

• a.button1o文本：悬停

Answer 1

那是因为你所申请的a颜色不是span试试这个

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    color: #f44336; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

在上面的代码中我加入color:#fff到a.button1o:hover，也是我加入#f44336到.button1o

另一种方法是这样的

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
a.button1o:hover span { 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

Answer 2

您可以在父元素上使用的:hover选择：

a.button1o:hover .button1o-text { 
    color: white; 
} 

你也应该把transition属性在您的第一个声明中，否则当用户停在按钮上方时，您将失去转换。

.button1o { 
    background-color: transparent; 
    padding: 10px 15px; 
    margin-right: 15px; 
    border: 2px solid #f44336; 
    border-radius: 2px; 
    transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover { 
    background-color: #f44336; 
} 
a.button1o:hover .button1o-text { 
    color: white; 
} 

.button1o-text { 
    font-size: .7em; 
    font-family: 'PT Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    color: #f44336; 
} 

Answer 3

你有两个选择。更简洁的选项是将color: #f44336规则移出.button1o-text和.button1o，这将允许当前悬停规则覆盖颜色。 （？有你有所有不同的CSS规则跨度的理由）

另一种选择是加入这个悬停规则上色文本：

.button1o:hover .button1o-text { 
    color: [hover color]; 
} 

Answer 4

需要悬停属性添加到跨度元素。那就是：

a.button1o>span:hover { 
    color:white; 
} 

这里是问题的你的工作代码

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
     color:white; 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 
a.button1o>span:hover { 
 
     color:white; 
 
    } 
 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

Answer 5

检查这个fiddle。

CODE

这应该工作，你想要的，告诉我，如果是这样，谢谢。

a.button1o:hover{ 
background-color: #f44336; 
transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover .button1o-text{ 
color: #fff; 
transition: all 0.9s ease 0.1s; 
} 

Answer 6

你不需要跨度类=“button1o文本... 只需设置融入button1o类，并添加颜色：白色的a.button1o：悬停类

<a class="button1o" href="" target="_blank">Flat button</a> 

您可能需要添加文本装饰：无属性到button1o defintions太

Answer 7

你把鼠标悬停错你把悬停在这个类中重写.button1o这种颜色

.button1o类，但.button1o文本

请用这样的代码

.button1o { 
background-color: transparent; 
padding: 10px 15px; 
margin-right: 15px; 
border: 2px solid #f44336; 
border-radius: 2px; 
} 
.button1o-text { 
font-size: .7em; 
font-family: 'PT Sans', sans-serif; 
font-weight: 700; 
text-transform: uppercase; 
letter-spacing: 0; 
color: #f44336; 
} 
a.button1o:hover { 
background-color: #f44336; 
} 
span.button1o-text:hover { 
transition: all 0.9s ease 0.1s; 
color:#fff; 
}