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

Question

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

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

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

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

非常感谢您的帮助。

此致。

Answer 1

虽然您无法通过标记实现此目的，但仅使用 css 是可以实现的。

您需要按照此处创建父子关系：

<div class="row">
<p class="origin">
    Text in English
    <span class="translation">Translated text</span>
</p>
<p class="origin">
    Text in English 2
    <span class="translation">Translated text 2</span>
</p>
<p class="origin">
    Text in English 3
    <span class="translation">Translated text 3</span>
</p>

.row {
    padding: 20px;
}

.origin {
    text-align: left;
}

.translation {
    display: inline-block;
    width: 50%;
    float: right;
    text-align: right;
}

.origin:hover > .translation {
    color: red;
}

工作示例：http://jsfiddle.net/m1d803sq/

Answer 2

jQuery solution

我在CSS

中添加了.hoverclass

.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');
  });
});

Answer 3

您应该使用 js 脚本来执行此操作，例如：（使用 jquery）

$( "span" ).hover(
  function() {
    var index = $(this).index();
    $('.section').each(function(k, v) {         $(v).find('span').eq(index).addClass('active');
    });
  }, function() {
    var index = $(this).index();
    $('.section').each(function(k, v) {         $(v).find('span').eq(index).removeClass('active');
    });
  }
);

.section {
  margin-bottom: 20px;
}
.active {
    background:beige;
    transition:all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="left section">
        <span class="a">Text in english 1</span>
        <span class="a">Text in english 2</span>
    </div>

    <div class="right section">
        <span class="b">Text translated 1</span>
        <span class="b">Text translated 2</span>
    </div>
</div>

您可以像这样最简单地进行多个翻译部分的排序。

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

Hover on text with sibling selectors

css

css-selectors

siblings