影響時，另一個元素懸停

-1

我如何也可能會影響其他元素懸停的元素，這兩個元素是在這個結構中的元素：影響時，另一個元素懸停

<div id="parent_element"> 
    <div id="class-open-1"></div> 
    <div id="class-close-1"></div> 
</div>

或者他們可能會在這個結構中：

<div id="parent_element"> 
    <div id="div1"> 
     <div id="class-open-1"></div> 
    </div> 
</div> 
<div id="parent_element"></div> 
    <div id="div2"> 
     <div id="class-close-1"></div> 
    </div> 
</div>

我已經試過這個解決方案，它完全適用於第一種情況，但對於第二種情況不工作：

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover ~ .class-close-" + j + " { background-color: cyan; }

j的變化，所以我只徘徊具有相同的名稱j

此解決方案的情況下工作，但不適用於這兩種情況。我也試過這樣：

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover .class-close-" + j + " { background-color: cyan; }

但這改變背景顏色，並且不只是懸停。

我只需要css或javascript來解決這個問題，有什麼建議嗎？我正在尋找適用於兩種情況的解決方案。

來源

2017-10-16 Mana

請發佈[mcve]和真正的HTML，CSS和JS/jQ – zer00ne

哪個元素具有懸停觸發器，哪個元素應該在CSS中更改？ – Roberrrt

爲什麼你發佈「僞標記」而不是實際的HTML？和'.class-open「+ j +」'???是甚至CSS？ –

您將需要使用JavaScript mouseover或jQuery .hover（）。這顯示鼠標懸停from the MDN。

myElement.addEventListener("mouseover", (event) => { 
    // do something to the other element. 
}

來源

2017-10-16 10:41:14

是的，我認爲這是隻有解決方案，因爲我不能使用CSS選擇器來解決這個問題！謝謝 – Mana

如果我的答案適用於您，您是否會點擊複選標記接受我的答案？或者至少點擊向上箭頭，如果我的答案有幫助。 –

我不知道如何懸停第二個元素。使用onmouseover（），現在我只將第一個元素的背景顏色更改爲500毫秒，但不能更改第二個元素的背景顏色，並且我認爲此解決方案的性能較差，因爲我總是必須搜索第二個元素元素，並且我有數百個具有相同className的元素，但只有最後一位數字發生變化。 – Mana

試試這個朋友：

 div#one 
 
    { 
 
    background-color:red; 
 
    } 
 
    div#one:hover ~ div#two 
 
    { 
 
    background-color:yellow; 
 
    }


 
    <div id="one"> 
 
    ONEE 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div id="two"> 
 
    two 
 
    </div>

來源

2017-10-16 10:50:19

謝謝你試圖幫助，但這不是我要找的東西，首先，我只想懸停在一個元素上，另一個元素也會懸停，但不會永遠改變背景顏色。不是兩個元素的結構，我有他們都在一個元素或每個他們有一個不同的父節點.. – Mana

這是什麼？它如何回答這個問題？不要只是脫口而出代碼。自己解釋一下！ https://stackoverflow.com/help/how-to-answer – Rob

如果你能控制的模板代碼[我相信我們在大多數情況下做]，那麼如果一個元素是其他元素中，它可以用css來解決。

否則，如果他們有不同的父母，JS將是人們已經建議的方向。

來源

2017-10-16 13:02:13

if (/\bclass-/.test(target.className)) { 

       var _style = document.createElement('style'); 
       var j = target.className.match(/\d+$/)[0]; 

       target.style.backgroundColor = "red"; 
       _style.innerHTML = ".class-close-" + j + " { background-color: red; }"; 

       setTimeout(function() { 
        target.style.backgroundColor = ""; 
        _style.innerHTML = '.class-close-' + j + ' { background-color: ""; }'; 
       }, 500); 

       document.head.appendChild(_style); 
      }

這裏是我做出的解決方案，但仍在尋找哈弗的「良好效果」，而不是僅僅刪除樣式爲500ms以後。希望這可以幫助別人。

來源

2017-10-16 13:21:27 Mana

影響時，另一個元素懸停

回答

相關問題