Question

我有一个导航栏，当用户滚动导航栏中的链接时，我希望更改父元素的背景图像。我知道有一种方法可以用一些简单的javascript来做到这一点，但我不像JS的业余爱好者。

这是html：

<div class="image">
<ul>
<li><a onmouseover="toggleElementOne()" href="#">Roll over to Change Parent Div class</a></li>
<li>Second Link</li>
<li>etc</li>
</ul>
</div>

这是css：

<style>
.image {
    background:url(image1.png);
    height:500px;
    width:1000px;
    display:block;
}

.image-two {
    background:url(image2.png);
    height:500px;
    width:1000px;
    display:block;
}
</style>

理想情况下，我希望导航栏中的每个链接都有不同的背景图像，但我想我可以为每个按钮设置不同的功能。一旦我知道如何使一个功能起作用，其余的应该很容易。

我现在的javascript是：

<script>
function toggleElementOne() {

    document.getElementsByClassName("image").className = "image-two";

}
</script>

这个想法是这个函数（由链接中的onmouseover事件激活）将找到具有类＆＃34; image＆＃34;的类的父元素。并将其更改为班级＆＃34;图像二。＆＃34;我也害怕会发生的是，一旦用户滚动链接，图像将保留，所以我还需要一个onmouseout事件来将背景图像返回到它的原始状态。

我该怎么办？

Answer 1

您正在寻找的javascript命令是Onmouseout，使用与mouseover相同的方式。

Answer 2

您只能使用CSS

<style>
.image {
    background:url(image1.png);
    height:500px;
    width:1000px;
    display:block;
}

.image:hover {
    background:url(image2.png);
}
</style>

jsfiddle

Answer 3

你也可以改变你的javascript线：

document.getElementsByClassName("image")[0].setAttribute("class","image-two");

Answer 4

如果您只想更改正在悬停的实际图像的背景，CSS可以非常轻松地完成此操作。但是，如果我正确理解您的问题，您希望根据用户悬停的子元素来更改一般背景图像。

事实上你可以用不那么复杂的Javascript来做这件事。对于所有菜单项，您甚至可以仅使用两个函数来执行此操作;但是你必须首先改变一些事情。

您现在使用getElementsByClassName的方式不正确。您可以使用班级image在CSS中将其用作.image，但只需在Javascript中选择一个项，您就必须使用{{1然后使用id="image"。您仍然可以将该类用于CSS，这很好。我稍后会将其称为＆＃34; imageDefault＆＃34; ，以区别于document.getElementById。

好的，现在是Javascript。您的菜单项确实需要id 和 onmouseover。但是每个菜单项都可以使用相同的函数，只传递不同的参数。这些参数可以引用要更改父元素的className，以便更改图像。

示例：

onmouseout

在这种情况下，当触发mouseover和mouseout事件时，所有标记都会调用<div id="image" class="imageDefault"> <ul> <li><a onmouseover="mOver('imageA')" onmouseout="mOut()" href="#">Roll over to Change Parent Div class</a></li> <li><a onmouseover="mOver('imageB')" onmouseout="mOut()" href="#">Second Link</a></li> <li><a onmouseover="mOver('imageC')" onmouseout="mOut()" href="#">etc</a></li> </ul> </div>和mOver，但是它们会将不同的字符串传递给mOut（I＆＃39; m在此示例中使用短函数名称以获取长HTML行中的可读性;当然可以随意重命名。

Javascript可以获取这些参数并直接将它们设置为className，如下所示：

mOver

请注意function mOver(newName) { document.getElementById("image").className = newName } function mOut() { document.getElementById("image").className = "imageDefault" }如何不需要mOut参数，因为它始终默认为newName。

最后，CSS看起来像这样：

"imageDefault"

当然可以简化为：

<style>
.defaultImage {
    background:url(image1.png);
    height:500px;
    width:1000px;
    display:block;
}

.imageA {
    background:url(image2.png);
    height:500px;
    width:1000px;
    display:block;
}

.imageB {
    background:url(image3.png);
    height:500px;
    width:1000px;
    display:block;
}

.imageC {
    background:url(image4.png);
    height:500px;
    width:1000px;
    display:block;
}
</style>

有很多方法可以做这些事情。这种方法基本上建立在您已经拥有的基础之上。我希望它有所帮助！

切换父元素onrollover的类

4 个答案:

jsfiddle