gpt4 book ai didi

css - 将鼠标悬停在带有兄弟选择器的文本上

转载 作者:行者123 更新时间:2023-11-28 08:20:57 25 4
gpt4 key购买 nike

我正在尝试进行平行翻译,左侧为英文文本,右侧为翻译文本。

当我将鼠标悬停在右侧的一个句子上时,我希望突出显示对应的英文句子。

我试过了,但似乎不起作用:

<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>

非常感谢您的帮助。

问候。

最佳答案

jQuery solution

我在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com