如何通過將鼠標懸停在另一個元素上來更改div的類

Question

我想要實現的基本上是具有導航元素，例如

鏈接1鏈接2鏈接3

在他們下面有一張圖片

[x] <-defaultImage

現在我想要的是，當我將鼠標懸停在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; }

我對腳本一無所知，因此請將其視為一個新問題，如果您有疑問並回答，請告訴我將代碼放在何處

非常感謝您的幫助！

Answer 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;
}

然后附上聽眾自己喜歡的方式，例如，如果你寫的鼠標懸停功能，你可以使用一個類似的模式，以現有的方式及移出時 ，如..

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>

Answer 2

萬一有人需要它，如果元素具有相同的父元素，則可以通過純CSS實現。 賦~或同位選擇器。 關於它如何工作的進一步解釋可以在這里找到。

通用的同級組合器選擇器與我們剛剛看過的相鄰同級組合器選擇器非常相似。 不同之處在於，被選擇的元素不需要立即在第一個元素之后，而是可以出現在其后的任何位置。

我做了一個jsfiddle來啟發這個技巧。 https://jsfiddle.net/cwh7dww1/