如何解决按钮上的CSS按钮悬停效果不起作用
每当我将鼠标悬停在按钮上时,我都试图对其上的div进行动画处理,以在文本旁边创建一个“省略号”效果。不知何故我什至无法使div改变颜色,更不用说将其从0缩放到1了。
.btn {
display: flex;
flex-flow: row nowrap;
justify-content: center;
text-align: center;
font-size: 1.3em;
cursor: pointer;
}
.btn:hover + .dot {
background-color: yellow;
}
.nxt {
margin-right: 10px;
text-align: center;
}
.dotdotdot {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
padding-bottom: 2px;
}
.dot {
background-color: red;
height: 7px;
width: 7px;
margin-right: 5px;
transition: background-color 1000ms;
}
<div class = "central_container">
<div class ="lower_container">
<div class="btn">
<div class="nxt">Next</div>
</div>
<div class ="dotdotdot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
任何帮助将不胜感激!谢谢。
解决方法
CSS Error: unexpected symbol in:
"oper.class
FROM "uploads"
选择器是“相邻同级组合器”(https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator),但是+
不是div.dot
的同级,因为它包含在{{1}中}。因此div.btn
是相邻的兄弟姐妹。
您可以更改行
div.dotdotdot
到
div.dotdotdot
,
.btn {
display: flex;
flex-flow: row nowrap;
justify-content: center;
text-align: center;
font-size: 1.3em;
cursor: pointer;
}
.btn:hover,.dot{
background-color: yellow;
}
.nxt {
margin-right: 10px;
text-align: center;
}
.dotdotdot {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
padding-bottom: 2px;
}
.dot {
background-color: red;
height: 7px;
width: 7px;
margin-right: 5px;
transition: background-color 1000ms;
}
<div class = "central_container">
<div class ="lower_container">
<div class="btn">
<div class="nxt">Next</div>
</div>
<div class ="dotdotdot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
,
问题在于按钮和.dot不在同一div中。请尝试以下代码:
.btn {
display: flex;
flex-flow: row nowrap;
justify-content: center;
text-align: center;
font-size: 1.3em;
cursor: pointer;
}
.btn:hover ~ .dotdotdot > .dot {
background-color: yellow;
}
.nxt {
margin-right: 10px;
text-align: center;
}
.dotdotdot {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
padding-bottom: 2px;
}
.dot {
background-color: red;
height: 7px;
width: 7px;
margin-right: 5px;
transition: background-color 1000ms;
}
<div class = "central_container">
<div class ="lower_container">
<div class="btn">
<div class="nxt">Next</div>
</div>
<div class ="dotdotdot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
,
编辑:现在可以根据需要运行
您必须使用.btn:hover,.dot:hover { ... }
而不是.btn:hover + .dot { ... }
.btn {
display: flex;
flex-flow: row nowrap;
justify-content: center;
text-align: center;
font-size: 1.3em;
cursor: pointer;
}
.btn:hover,.dotdotdot:hover > .dot {
background-color: yellow;
}
.nxt {
margin-right: 10px;
text-align: center;
}
.dotdotdot {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
padding-bottom: 2px;
}
.dot {
background-color: red;
height: 7px;
width: 7px;
margin-right: 5px;
transition: background-color 1000ms;
}
<div class = "central_container">
<div class ="lower_container">
<div class="btn">
<div class="nxt">Next</div>
</div>
<div class ="dotdotdot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。