0

我想要实现的基本上是具有导航元素，例如

链接1 链接2 链接3

在它们下面有一个图像

[x] <- 默认图像

现在我想要的是，当我将鼠标悬停在 link1 上时，图像变为 image1，当我将鼠标悬停在 link2 上时，图像变为 image2，......当我 onMouseOut - 图像返回到 defaultImage

我有这个工作

function mouseOverImage(elm) {
var id = document.getElementById("catPic");
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var id = document.getElementById("catPic");
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}

+

<ul>
<li>
<a href="link.htm" data-cat-image="images/img11.jpg"
data-cat-width="280px"
data-cat-height="336px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link1</a>
</li>

<li><a href="link2.htm" data-cat-image="images/img22.jpg"
data-cat-width="280px"
data-cat-height="436px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link2</a></li>

+

<div class="floatimg">
<img src="" width="0" height="0" alt="" id="catPic"
data-default-image="images/default.jpg"
data-default-width="0px" data-default-height="40px">
</div>

它工作正常

但

现在我想改变方法，而不是每次通过 onMouseOver 调用更改时都使用不同的图像，我想使用Sprites

我真的很挣扎我应该如何处理它？

我从几张图像中生成了一个图像精灵，我有一个类似的代码

.sprite-1, .sprite-2, .sprite-3, .sprite-4,
{ display: block; background: url('tmp.png') no-repeat; }
.sprite-3 { background-position: -0px -0px; width: 280px; height: 441px; }
.sprite-4 { background-position: -288px -0px; width: 280px; height: 420px; }
.sprite-5 { background-position: -576px -0px; width: 280px; height: 420px; }

我对脚本一无所知，所以请将其视为一个全新的问题，如果您有并回答，请告诉我将代码放在哪里

非常感谢您的帮助！

4

2 回答 2

1

首先，创建一些函数来添加和删除HTMLElement中的类，您将对Element.className属性感兴趣。

function hasClass(e, c) {
    return (' ' + e.className + ' ').indexOf(' ' + c + ' ') !== -1; // in list
}

function addClass(e, c) {
    if (!hasClass(e, c)) e.className += ' ' + c; // add if not in list
    return e;
}

function removeClass(e, c) {
    var i, s = ' ' + e.className + ' ';
    c = ' ' + c + ' ';
    while (-1 !== (i = s.indexOf(c))) { // while class in list
        s = s.slice(0, i) + ' ' + s.slice(i + c.length); // replace with space
    }
    e.className = s.slice(1, -1); // set
    return e;
}

然后以您喜欢的方式附加侦听器，例如，如果您为mouseover和mouseout编写函数，则可以使用与现有方式类似的模式，例如..

function chooseImage(x) {
    addClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
    // unchooseImage('default here');
}
function unchooseImage(x) {
    // chooseImage('default here');
    removeClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
}

您可以使用另一个属性element.classList，但这还没有被所有浏览器完全支持（仅 IE 10 中的基本支持）。

以下将是.sprite-1和.sprite-2。

<a href="example.htm"
   onmouseover="chooseImage(1)"
   onmouseout="unchooseImage(1)">link1</a>
<a href="example.htm"
   onmouseover="chooseImage(2)"
   onmouseout="unchooseImage(2)">link2</a>
于 2013-07-05T19:26:05.353 回答
0

以防万一有人需要，如果元素具有相同的父级，则可以通过纯 CSS 来实现。使用~或兄弟选择器。可以在此处找到有关其工作原理的进一步说明。

一般的兄弟组合选择器与我们刚刚看到的相邻兄弟组合选择器非常相似。不同之处在于被选择的元素不需要立即在第一个元素之后，而是可以出现在它之后的任何位置。

我做了一个jsfiddle来启发这个技巧。 https://jsfiddle.net/cwh7dww1/

于 2016-06-28T22:34:24.333 回答