Question

我有一个带有div元素（名为apropos）的网页。当鼠标在菜单上时，我希望div更改为在完全相同的位置显示另一个名为blog的div。目前，博客div显示在apropos one下面。两者的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>

在鼠标悬停时更改div

2 个答案: