在另一个Div上更改文字

时间:2016-05-25 00:22:59

标签: javascript jquery html css

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

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

但它的播种没有影响吗?

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

祝你好运, 迈克尔

3 个答案:

答案 0 :(得分:0)

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

这个想法是杀死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;
&#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;
&#13;
&#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

答案 1 :(得分:0)

这个怎么样:

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

答案 2 :(得分:0)

无论如何,它看起来在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部分保持不变。 (..)