在另一个Div上更改文本

Question

晚上好，社区，我的代码有问题。

HTML：

  <a href="aboutme.php">
       <div class='aboutus'>
            <div id="mbubble">
                stuff inside here
            </div>
        </div>
   </a>
   <div id='title'>
        <div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
        <div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>

我想如果将鼠标悬停在div“ mbubble”上，则“ thome”类将更改其文本。 我试图通过使它们可见/不可见来做到这一点。

CSS：

#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }

但这没有影响吗？

你能告诉我你会怎么做吗？ 或至少有任何一种通过悬停来更改文本的方法吗？

最好的问候，迈克尔

Answer 1

如果您的结构真的那么简单，那么可以使用带有指针事件的技巧：

这个想法是杀死a上的pointer-events并仅在#mbubble其重新激活，因为当您将鼠标悬停在一个孩子上时，父对象也会被悬停，因此选择器也可以取自于父对象。

 a {pointer-events:none; } #mbubble {pointer-events:auto;} a:hover + #title .thome , .tabout {display:none;} a:hover + #title .tabout {display:block;} 

 <a href="aboutme.php"> <div class='aboutus'>i don't trigger anything <div id="mbubble"> I DO </div> </div> </a> <div id='title'> <div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div> <div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div> 

现在，如果您意识到没有pointer-events而只有a;hover就可以了，那么您可能会理解，只有<a>中有其他内容不起作用时，它才有用。 仅点击#mbubble会触发该链接。您的示例太少了吗？ 如果没有，只需使用a:hover

http://caniuse.com/#search=pointer-events

Answer 2

这个怎么样：

$('#mbubble').hover(function () {   
    $('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})

Answer 3

无论如何，它在css中看起来都是可行的，尽管不建议这样做，但是在JavaScript中有一个使用横向DOM的快速内联解决方案，如下所示：

您必须记住，它可能具有奇怪的行为，右键单击无法轻易复制，这就是为什么不应直接使用嵌入式javascript的原因。 有解决方法，祝您好运。

  <a href="aboutme.php"> <div class='aboutus'> <div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble"> stuff inside here </div> </div> </a> <div id='title'> <div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div> <div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div> 

因此，更好的方法是使用如下函数：

  <a href="aboutme.php"> <div class='aboutus'> <div onmouseover="changeText()" id="mbubble"> stuff inside here </div> </div> </a> <div id='title'> <div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div> <div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div> <script> function changeText() { document.getElementById('title').children[0].children[0].textContent='Enter the void!' } </script> 

尽管如此，这还不够干净，JavaScript中的好方法是添加一个事件侦听器，如下所示：

- 
  
 
  
  
  
 
   
 
    
       <a href="aboutme.php">
           <div class='aboutus'>
               <div id="mbubble">
                   stuff inside here
               </div>
           </div>
       </a>
       <div id='title'>
           <div class="thome">
               <p style="letter-spacing:10;">Text BEFORE</p>
           </div>
           <div class="tabout">
               <p style="letter-spacing:10;">Text AFTER</p>
           </div>
          <script>
           var toBeWatched = document.getElementById('mbubble');
           toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
   = 'Enter the void!';setTimeout(function() {  document.getElementById('title').children[0].children[0].textContent 
   = 'Text BEFORE!!!';
               }, 2500);
           }, false);
         </script> 
 
   
 
  

这样，html部分就保持不变。 （..）