Question

在我的网站中，当用户将鼠标移到div上时，我想更改div的某些样式属性。我还想隐藏/显示这个div的一些子元素。我没有任何JavaScript经验，我正在试验我在互联网上找到的一些代码。

假设我的div看起来像那样：

<div class="Advertisement">
    <h2 class="Title">title</h2>
</div>

我想在鼠标移动div之后隐藏这个h2元素。我的JS脚本看起来像这样：

window.onload = function() {
    var lis = document.getElementsByClassName("Advertisement");
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.style.backgroundColor = "green";
            this.style.width = "800px";
            var children = lis[i].childNodes.getElementsByClassName("Title");
            for (var j = 0; j < children.length; j++) {
                children[j].onmouseover = function() {
                    this.style.visibility = "hidden";
                };
            }
        };
    }
};

更改大小和背景颜色可以正常工作，但“h2”元素不会消失。我做错了什么？

Answer 1

实际上，您不需要JavaScript来执行该任务。为什么不使用纯HTML / CSS？

试试这个：

<style>
    div.advertisement:hover > h2, div.advertisement:focus > h2 {
        color:      red;
    }
    div.advertisement > h3 {
        display:    none;
    }
    div.advertisement:hover > h3, div.advertisement:focus > h3 {
        display:    block;
    }
</style>

<div class="advertisement" tabindex="-1">
    <h2>title</h2>
    <h3>hidden text</h3>
</div>

这个实际上显示了一些东西，但当然它隐藏你的h2反之亦然。

RyanB的扩展

这与我给出的答案类似。我会说隐藏文本应该是<p>, <span> or a <div>而不是<h3>才能有更好的语义。如果重要的话，还要将tabindex="-1"添加到div中。添加tabindex="-1"可让<div>获得焦点。

Answer 2

lis [i]在这里未定义，不需要childnode 所以，而不是这个

var children = lis[i].childNodes.getElementsByClassName("Title");

写

 var children = this.getElementsByClassName("Title");

如何在“onmouseover”函数中更改div子元素的可见性

2 个答案: