0

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

假设我的 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”元素不会消失。我做错什么了？

4

2 回答 2

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 的扩展

这与我给出的答案相似。我会说隐藏文本应该是 a<p>, <span> or a <div>与 a<h3>以具有更好的语义。如果它很重要，也可以添加tabindex="-1"到 div 中。添加tabindex="-1"允许<div>接收焦点。

于 2012-06-15T15:31:38.923 回答
0

lis[i] 在这里是未定义的，不需要子节点所以，而不是这个

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

写

 var children = this.getElementsByClassName("Title");
于 2012-06-15T15:27:58.527 回答