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＆＃34; mbubble＆＃34;班级＆＃34; thome＆＃34;会改变它的文字。我尝试通过使它们可见/不可见来做到这一点。

CSS：

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

但它的播种没有影响吗？

你能告诉我你会怎么做吗？或者至少是通过悬停来改变文本的任何方式？

祝你好运，迈克尔

Answer 1

如果你的结构非常简单，那么指针事件的技巧可以起作用：

这个想法是杀死var array_date = []; var parser = d3.time.format("%Y/%m/%d %I%P"); d3.csv("my.csv", function(data){ console.log(data) data.forEach(function(d) { var theDate = parser(new Date(d.date)); array_date.push(theDate); }) console.log(array_date) });并仅在pointer-events上重新激活它，因为当你悬停一个孩子时，父母也会被徘徊，选择器可以从父母那里获取。

＆＃13;

#mbubble

＆＃13;

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

＆＃13;

现在，如果您意识到没有<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

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中是可行的，虽然不推荐，但是使用横向DOM的javascript中有一个快速的内联解决方案，如下所示：

你必须记住它可能有奇怪的行为，通过右键单击不容易复制，这就是不应该直接使用内联javascripts的原因。周围有解决方法，祝你好运。

  <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部分保持不变。（..）

在另一个Div上更改文字

3 个答案: