切换父元素的类

Toggle class of parent element onrollover

本文关键字：元素      更新时间：2023-09-26

我有一个导航栏，我希望当用户滚动到导航栏中的链接时，父元素的背景图像改变。我知道有一种方法可以用一些简单的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事件激活)将找到类为"image"的父元素，并将其更改为类"image-two"。我还担心会发生的是，一旦用户滚动链接，图像将留在那里，所以我还需要一个onmouseout事件来将背景图像返回到它的原始状态。

我该怎么做??

CSS可以很容易地做到这一点，如果你只想改变你悬停的实际图像的背景。但是，如果我对你的问题理解正确的话，你希望一个通用的背景图像根据用户悬停在哪个子元素上而改变。

事实上，你可以用不那么复杂的Javascript来做这件事。您甚至可以仅使用两个函数来实现这一点，用于所有菜单项;但有几件事你必须先修改。

你现在使用getElementsByClassName的方式是不正确的。您可以使用类image在CSS中使用它作为.image，但要简单地在Javascript中选择一个项目，您将不得不使用id="image"，然后使用document.getElementById。您仍然可以将类用于CSS，这很好。我稍后将其命名为"imageDefault"，以区别于id。

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

的例子:

<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>

在这种情况下，当触发mouseover和mouseout事件时，所有标记都调用mOver和mOut，但它们将不同的字符串传递给mOver(我在本例中使用简短的函数名称，以便在长HTML行中可读性;当然，可以随意重命名)。

Javascript可以选择这些参数并直接将它们设置为className，如下所示:

function mOver(newName)
{
    document.getElementById("image").className = newName
}
function mOut()
{
    document.getElementById("image").className = "imageDefault"
}

注意mOut不需要newName参数，因为它总是默认返回到"imageDefault"。

最后，CSS看起来像这样:

<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>

当然可以简化为:

<style>
.defaultImage, .imageA, .imageB, .imageC {
    height:500px;
    width:1000px;
    display:block;
}
.defaultImage { background:url(image1.png); }
.imageA { background:url(image2.png); }
.imageB { background:url(image3.png); }
.imageC { background:url(image4.png); }
</style>

有很多方法可以做这些事情。这个方法基本上是建立在你已有的基础上的。我希望这对你有帮助!

您正在寻找的javascript命令是Onmouseout，使用与鼠标悬停相同的方式

只能在CSS中使用

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

jsfiddle

你也可以这样改变你的javascript行:

document.getElementsByClassName("image")[0].setAttribute("class","image-two");
相关文章：