ページ上の "p"要素を表示する "a"要素上のマウス

Question

"p要素"の段落をページに表示するには、 "a href"要素にマウスをどのように置くことができるかを示すJavaScriptを書いてください。

私は段落を表示しています：none with css;段落を表示するために、マウスをリンクの上に関連付ける必要があります。

歓声

Answer 1

あなたがリンクを置くと要素を表示するには、コードのこの部分を使用することができますので、私は、あなたがjQueryのを使用していないと仮定しています。

document.getElementById("link").addEventListener("mouseover", function(){ 
    document.getElementById("paragraph").style.display = "block"; 
}); 

あなたはあなたのリンクや段落のIDでlinkとparagraphを交換する必要があります。

document.getElementById("link").addEventListener("mouseout", function(){ 
    document.getElementById("paragraph").style.display = "none"; 
}); 

Answer 2

私はあなたのための例を作っています：

$(document).ready(function() { 
 
    var link = $('#myLink'); 
 
    link.on('mouseover', function() { 
 
    $('.lorem').show(); 
 
    }) 
 
})

.lorem { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="localhost" id="myLink">my link</a> 
 

 
<p class="lorem"> 
 
    lorem ipsum 
 
</p>

Answer 3

マウスがリンクを離れるときにも、もう一度段落を非表示にしすぎて、このコードを追加するには

あなたはこれのためにJSを使う必要はありません。 cssを使ってもこれを行うことができます。

<a href="#link" class="hoverOn"> 
    <p class="hoverContent">This is hover content</p> 
</a> 

<style> 
p.hoverContent{ 
    display:none; 
} 
a.hoverOn:hover p.hoverContent{ 
    display:block !important; 
} 
</style> 

Answer 4

jQuery .hover()メソッドを使用できます。

HTML

<a href="#" id="mousehoverhere"> Link Hover </a> 
<p id="para">Hidden text goes here</p> 

JS

$("#mousehoverhere").hover(
    function() { 
     /* Effect during hover */ 
     $("#para").slideDown(500); 
    }, function() { 
     /* Effect after un-hover */ 
     $("#para").slideUp(500); 
    } 
); 

CSS

#para { 
    display: none; 
} 

は、私たちはあなたのためにコードを書くためにここにはありませんJSFiddle demo