別の部門のテキストを変更

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」の上にマウスを置く場合、私はしたいです。私はそれらを見える/見えないようにすることによってそれを試みました。

CSS：

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

しかし、全く影響を与えsowhingんですか？

どうすればいいのか教えてもらえますか？または、少なくとも、ホバリングによってテキストを変更する方法はありますか？

敬具、 マイケル

Answer 1

あなたの構造は本当にシンプルであれば、ポインタイベントとトリックは仕事ができる：

をアイデアは上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

：recommmendedないながら

$('#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パーツは変更されません。 （..）