我有2个div-我希望当我悬停在第二个div上时，第一个div的文本会发生变化。
我下面的规则似乎没有任何作用:
.ico-b:hover ~ .lab-marker::before {content: "Option -";}
如有任何意见，将不胜感激。
null
.lab-marker {
height: 22px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
width: 12px;
margin: auto;
margin-bottom: 20px;
font-size: 14px;
opacity: 0.5;
font-weight: 400;
background-color: pink;
}
.ico-b { padding: 20px; background-color: yellow; }
.ico-b:hover ~ .lab-marker::before {content: "Option -";}<div>
<div class="lab-marker">A</div>
<div class="ico-b">Hover over me</div>
</div>null
您不能获取前一个兄弟姐妹，但可以颠倒顺序
所以这是可行的:
null
.reverse-it {
display:flex;
flex-direction:column-reverse;
}
.lab-marker {
height: 22px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
min-width: 12px;
margin: auto;
margin-bottom: 20px;
font-size: 14px;
opacity: 0.5;
font-weight: 400;
background-color: pink;
}
.ico-b { padding: 20px; background-color: yellow; }
.ico-b:hover ~ .lab-marker::before {font-size:16px;content: "Option -";}
.ico-b:hover ~ .lab-marker {font-size:0;background-color:green;}<div class="reverse-it">
<div class="ico-b">Hover over me</div>
<div class="lab-marker">A</div>
</div>
你可以做这样的事。
jQuery
$(document).ready(function() {
$('.ico-b').hover(function() {
// it's a good idea create the parent div with a class or idt
$(this).parent('div').find('.lab-marker').text('New text');
}, function() {
// something when not hover
});
});
