javascript - 在翻转时切换父元素的类

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 事件激活)将找到类为“image”的父元素并将其更改为类“image-two”。我还担心会发生的情况是，一旦用户退出链接，图像就会保留下来，因此我还需要一个 onmouseout 事件来将背景图像恢复到其原始状态。

我该怎么做？？？

Answer 1

如果您只想更改悬停的实际图像的背景，CSS 可以很容易地做到这一点。但是，如果我正确理解了您的问题，您会希望根据用户将鼠标悬停在哪个子元素上来更改一般背景图像。

事实上，您可以使用不那么复杂的 Javascript 来做到这一点。对于所有菜单项，您甚至可以只使用两个函数来做到这一点；但您必须先更改一些内容。

您现在使用 getElementsByClassName 的方式不正确。您可以使用 image 类在 CSS 中将其用作 .image，但要在 Javascript 中仅选择一个项，您将拥有使用 id="image" 然后使用 document.getElementById。您仍然可以将该类用于 CSS，这很好。稍后我将其称为 “imageDefault”，以区别于 id。

好的，现在是 Javascript。您确实需要在菜单项上使用 onmouseover 和 onmouseout。但是每个菜单项都可以使用相同的功能，只是传递不同的参数。这些参数可以引用您想要将父元素更改为的类名以更改图像。

例子:

<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 可以获取这些参数并像这样直接将它们设置为类名:

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>

有很多方法可以做这些事情。这种方法基本上只是建立在你已经拥有的基础上。希望对您有所帮助!