Question

有人可以给我写一些javaScript来展示如何将鼠标移到＆＃34; a href＆＃34;元素显示＆＃34; p＆＃34;页面上的元素段落。

我显示了段落：没有css;我想将鼠标悬停在链接上以显示段落。

欢呼声

Answer 1

你不需要为此使用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 2

您可以使用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

Answer 3

我假设您没有使用jQuery，因此您可以使用这段代码在您悬停链接时显示该元素。

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

您需要将link和paragraph替换为您的链接和段落的ID。

要在鼠标离开链接时再次隐藏段落，也要添加此代码：

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

Answer 4

我为你做了一个例子：

$(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>

鼠标悬停在＆＃34; a＆＃34;元素显示＆＃34; p＆＃34;页面上的元素

4 个答案: