Javascript：懸停元素，在無關元素中更改類

我已經搜索到了廣泛的，並且找不到解決方案。Javascript：懸停元素，在無關元素中更改類

我有兩個div。一個在另一個的右邊。在每個div中，我都有列表元素，但它們絕不是父母或兄弟姐妹，所以我不能使用CSS。

有沒有人有一個解決方案，我可以在我的html文檔中的任何地方有鏈接，當它懸停時，更改另一個元素的類，而不管它放置在html文檔中的什麼位置？例如Javascript。

這個想法是，當我將一個元素懸停在左側列表中時，它會突出顯示與其相關的右側列表中的元素。

來源

2017-01-12 Streching my competence

你能粘貼html在這裏？ – Deep

懸停是jquery，雖然權利 – sweaver2112

和jQuery是JavaScript –

有很多方法可以實現這一點。我創建了一個使用jQuery來操作mouseenter mouseleave事件（基本上爲hover）的另一個元素上的類的示例。

<div class="red"> 
    x 
</div> 
<div class="green"> 
    y 
</div> 

$('.red').on('mouseenter mouseleave', function() { 
    if ($('.green').hasClass('hover')) { 
    $('.green').removeClass('hover'); 
    } else { 
    $('.green').addClass('hover'); 
    } 
});

Sample

來源

2017-01-12 16:57:23 VladNeacsu

謝謝！我添加了我的頭（文件夾中的兩個文件名爲「js」，路徑是正確的），然後是CSS中的css和我的html文檔中的html。這是在我的電腦上的一個文件夾中脫機。 divs和造型作品，但我從懸停沒有反應。我在這裏錯過了什麼？正如W3學校提示的那樣，「js.js」是我放置js的地方。 –

打開瀏覽器控制檯，看它是否輸出錯誤 – VladNeacsu

js.js：1 Uncaught TypeError：$（...）。on不是函數（...）（匿名函數）@ js.js：1 –

jQuery是一個相當大的庫。我強烈建議你在純JavaScript中做這個，如果你不在你網頁的其他地方使用Jquery的話。這裏是我創建的一個例子，當另一個div被一個簡單的If語句懸停時，它改變了一個div的類。

https://jsfiddle.net/c16rvt0y/1/

function highlightDiv(){ 
    if (document.getElementById("highlightMe").className === "otherDiv"){ 
     document.getElementById("highlightMe").className = "otherDiv otherDivHighlighted" 
    } else { 
    document.getElementById("highlightMe").className = "otherDiv" 
    } 
}

下面是針對單獨的div depanding哪一個是由函數被調用的例子：

https://jsfiddle.net/c16rvt0y/2/

function highlightDiv(highlightMeID){ 
    if (document.getElementById(highlightMeID).className === "otherDiv"){ 
     document.getElementById(highlightMeID).className = "otherDiv otherDivHighlighted" 
    } else { 
    document.getElementById(highlightMeID).className = "otherDiv" 
    }

}

來源

2017-01-12 17:12:05 Benneb10

這可以工作，但會覆蓋目標元素的類 – VladNeacsu

您可以在該元素上添加一個單獨的類，以更改邊界/背景，就像我在第二個示例中那樣。它不覆蓋它。用.class調用non hightlighted div，用.class.hightlightedClass調用突出顯示的div。第二個是更具體的，所以它會覆蓋任何正常的.class類型（我希望我是有道理的） – Benneb10

完美清晰，但你總是必須維護'otherDiv'類的代碼，或任何類元素之前。 jQuery通過添加和刪除類正確處理。使用JavaScript可以輕鬆完成，但jQuery更易於理解。 – VladNeacsu

Javascript：懸停元素，在無關元素中更改類

回答

相關問題