我正在尝试进行平行翻译，左侧为英文文本，右侧为翻译文本。
当我将鼠标悬停在右侧的一个句子上时，我希望突出显示对应的英文句子。
我试过了，但似乎不起作用:
<style>
.left, .right {display:inline-block; vertical-align:top; width:450px;text- align:justify; padding: 5px;}
.a, .b {}
.main {margin: 0 auto; width:1000px;}
.a:hover ~ .b {
background:beige;
transition:all 0.3s ease;
}
.b:hover, .a:hover {
background:beige;
transition:all 0.3s ease;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<span class="a">Text in english 1</span>
<span class="a">Text in english 2</span>
</div>
<div class="right">
<span class="b">Text translated 1</span>
<span class="b">Text translated 2</span>
</div>
</div>
非常感谢您的帮助。
问候。
最佳答案
我在 CSS 中添加了 .hover 类
.hover {
background:beige;
}
还有一些 JavaScript 逻辑:
$(document).ready(function() {
var left = $('.left span');
var right = $('.right span');
left.hover(function() {
right.eq($(this).index()).toggleClass('hover');
});
right.hover(function() {
left.eq($(this).index()).toggleClass('hover');
});
});
关于css - 将鼠标悬停在带有兄弟选择器的文本上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28767002/