是否有一个类似于一般兄弟选择器的选择器，它不需要具有相同父元素的元素？

Question

我正在使用wordpress构建一个日语学习网站（我是css和html等初学者），并希望添加一个假名助手：每当光标悬停在假名（基本日语字符）上时文本，属于romaji应显示在固定的div中。 这是我到目前为止的简化版本（对于这个社区的帮助）：

＆＃13;

＆＃13;

/*working, but only when in same parent*/
.ko:hover ~ .kanahelfer-ko {display: block;}
/*not working, because not same paren?*/
.re:hover ~ .kanahelfer-re {display: block;}
/*not working because ???*/
.ha:hover .kanahelfer-ha {display: block;}
/*how to get it working?*/

.kanahelfer-ko{
       display: none;
       position: fixed;
       left: 28px;
       top: 120px;
       height: 160px; 
       width: 160px;
       color: black;
}

.kanahelfer-re{ 
       position: fixed;
       left: 28px;
       top: 120px;
       display: none;
       height: 160px; 
       width: 160px;
       color: black;
}

.kanahelfer-ha{ 
       position: fixed;
       left: 28px;
       top: 120px;
       display: none;
       height: 160px; 
       width: 160px;
       color: black;
}

＆＃13;

<span class="ko">こ</span><span class="re">れ</span><span class="ha">は</span>

<div class="kanahelfer-ko">
    <div class="kana">ko</div> 
</div>

<div>
<div class="kanahelfer-re">
    <div class="kana">re</div> 
</div>
</div>
    
<div class="kanahelfer-ha">
  <div class="kana">ha/Partike wa</div> 
</div>

＆＃13;

＆＃13;

＆＃13;

问题是，有超过200种不同的假名和带有日语字母的文本在表格中，因此如果我找不到可行的解决方案，我将不得不为每个表格单元格（太多）制作超过200个条目。有没有一个选择器或方法来实现这一点只有css和html，即使元素不在同一个父级？ （如果没有，我将不得不学习js -.-）。我不明白为什么.ha:hover .kanahelfer-ha {display: block;}不起作用。

Answer 1

我已更新您的代码段并添加了一些JavaScript。

1. 您需要链接JQuery才能使此代码正常工作。

2. 您需要将所有JS代码放入ready事件处理程序：

   $(function() {
      // JS code
   });
   

3. $('.letters') - 查找letters类的所有元素。

4. this - 当前对象（在此特定情况下点击）。

5. $(this).data('letter') - 从data-letter属性获取值。

＆＃13;
＆＃13;
// Taking all ".letter" in ".letters" and bind an event handler to "hover" event
$('.letters .letter').hover(function () {
  // Get a letter from hovered element
  var letter = $(this).data('letter');
  // Show just necessary element  
  $('.kanahelfer-' + letter).show();
}).
// Bind an event handler for "mouseleave" event
mouseleave(function() {
  // Hide all ".kanahelfer" elements
  $('.kanahelfer').hide();
});
＆＃13;
.kanahelfer-ko{
       display: none;
       position: fixed;
       left: 28px;
       top: 120px;
       height: 160px; 
       width: 160px;
       color: black;
}

.kanahelfer-re{ 
       position: fixed;
       left: 28px;
       top: 120px;
       display: none;
       height: 160px; 
       width: 160px;
       color: black;
}

.kanahelfer-ha{ 
       position: fixed;
       left: 28px;
       top: 120px;
       display: none;
       height: 160px; 
       width: 160px;
       color: black;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kana-container">
  <div class="letters">
  <span class="letter" data-letter="ko">こ</span><span class="letter" data-letter="re">れ</span><span class="letter" data-letter="ha">は</span>
  </div>

<div class="kanahelfer kanahelfer-ko">
    <div class="kana">ko</div> 
</div>

<div>
<div class="kanahelfer kanahelfer-re">
    <div class="kana">re</div> 
</div>
</div>
    
<div class="kanahelfer kanahelfer-ha">
  <div class="kana">ha/Partike wa</div> 
</div>
</div>
＆＃13;
＆＃13;
＆＃13;