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

中添加了.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');
  });
});

Answer 3

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

＆＃13;

$( "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');
    });
  }
);

＆＃13;

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

＆＃13;

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

＆＃13;

您最简单的方法就是制作一个多翻译部分。

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

3 个答案: