悬停时是否可以触发家长的课程?
我知道它可以用 jquery 完成,但我想做一个纯 css 解决方案。
My code:
.navbar-form{
padding-left: 55px;
.input-group{
width: 200px;
.form-control{
border-right: none;
width: 350px;
&:hover & {
border-color: blue;
}
}
.input-group-addon{
background-color: white;
border-left: none;
}
}
}
FIDDLE: http://jsfiddle.net/fcKyc/ http://jsfiddle.net/fcKyc/
当我专注于input
, .input-group-addon
会做某事。input
和图标是输入组的子项。
如果我理解正确的话,这是我对您所描述的 DOM 交互的解释。
.parent
将鼠标悬停在 .child1 上会影响 .child2
如果是的话,那么这里:
.form-control {
... //your CSS for this
input {
//CSS for input
&:hover ~ .input-group-addon {
//CSS for .input-group-addon when input is hovered
}
}
}
OR, if .input-group-addon
就在之后input
(相邻兄弟),那么你可以使用以下内容:
.form-control {
... //your CSS for this
input {
//CSS for input
&:hover + .input-group-addon {
//CSS for .input-group-addon when input is hovered
}
}
}
正如@Martin 建议的那样。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)