我有一些带有 bootstrap 4 和 mdb 的按钮,当我用鼠标悬停时,我试图让图标和文本都具有动画效果,但它们只有在我将鼠标悬停在每个按钮上而不是按钮上时才有效。
代码
.primary_color {
background-color: #dc1921;
}
.btn {
width: 150px;
height: 100px;
padding: 1rem;
font-size: 0.81rem;
margin: .5rem 0;
border: 0;
-webkit-border-radius: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: uppercase;
white-space: normal;
word-wrap: break-word;
color: #fff;
}
.icono img {
filter: invert(100%);
width: 35px;
}
.icono img {
transition: 0.5s ease-in-out 0s;
}
.icono:hover img {
transform: scale(1.2);
}
b {
transition: 0.5s ease-in-out 0s;
}
b:hover {
letter-spacing: 2px;
}
<button type="button" class="btn primary_color waves-effect waves-light">
<span class="icono"><img src="https://i.imgur.com/7s0Ddbj.png" alt="Iconos"></span><br>
<b>LANDSCAPE</b>
</button>
您必须将鼠标悬停在按钮上,然后使用选择器“导航”到要从那里设置动画的元素
您必须将按钮作为主选择器,以便
hover
在按钮上完成后,样式将应用于图像和子文本:有时我们怀疑CSS的潜力,也许正是因为这个原因,我们不去尝试,因为我们认为它行不通。我已经更改了 的CSS规则,
hover
使hover
按钮首先链接到,然后查找该规则将实际影响的元素。在您的情况下,分别为 theimg
和 to theb
。这种选择元素的方式是可行的,因为按钮是我们想要用CSS规则影响的两个元素的父元素。如果它们之间的关系“更复杂”,Javascript 已经开始发挥作用,这在选择时允许更大的灵活性我们在DOM中的元素。
你好,看看这个:
请注意,您只是错误地应用了 CSS,它应该是 您的样式中的按钮而不是b,我希望它对您有用...!