鼠标悬停时更改div

Question

我有一个带有div元素(名为apropos) diplayed的网页。当鼠标在菜单上时，我希望div更改为在完全相同的位置显示另一个名为blog的div。目前，博客div显示在第一篇文章的下面。两者的CSS是相同的。节选：

<a href="#" onMouseOver="show_blog()" onMouseOut="hide_blog()">Blog</a>

<div class="apropos"><p>lorem ipsum1</p></div
<div class="blog"><p>lorem ipsum2</p></div>

<script>
function show_blog() {
    document.getElementsByClassName("apropos")[0].style.visibility = "hidden";
    document.getElementsByClassName("blog")[0].style.visibility = "visible";
}

function hide_blog() {
    document.getElementsByClassName("apropos")[0].style.visibility = "visible";
    document.getElementsByClassName("blog")[0].style.visibility = "hidden";
}
</script>

Answer 1

您需要使用display属性，而不是visibility属性，因为它会留下空间，就像元素仍然在那里一样：

function show_blog() {
    document.getElementsByClassName("apropos")[0].style.display = "none";
    document.getElementsByClassName("blog")[0].style.display = "block";
}

function hide_blog() {
    document.getElementsByClassName("apropos")[0].style.display = "block";
    document.getElementsByClassName("blog")[0].style.display = "none";
}

Answer 2

如前所述，将visibility更改为display属性。

只是为了给答案添加另一种方法，这可以很容易地用css解决。由于元素是兄弟姐妹，所以可以使用同级选择器：

​

#blogAnchor:hover ~ .blog
#blogAnchor:not(:hover) ~ .apropos{
  display: block;
}

#blogAnchor:hover ~ .apropos,
#blogAnchor:not(:hover) ~ .blog{
  display: none;
}

<a id="blogAnchor" href="#">Blog</a>

<div class="apropos"><p>lorem ipsum1</p></div>
<div class="blog"><p>lorem ipsum2</p></div>

​