懸停一個元素時如何影響其餘元素

我想作的是將某個div懸停時，它將影響另外一個div的屬性。

例如，在此JSFiddle演示中 ，當您將鼠標懸停在#cube它會更改background-color可是我想要的是，當我將鼠標懸停在#container ， #cube會受到影響。

div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; }

<div id="container"> <div id="cube"> </div> </div>

---

#1樓

很是感謝Mike和Robertc的有用帖子！

若是您的HTML中有兩個元素，而且您想要:hover在一個元素上，並在另外一個元素中定位樣式更改，則這兩個元素必須直接相關-父母，子女或兄弟姐妹。 這意味着這兩個元素要麼必須在另外一個元素以內，要麼必須都包含在同一較大的元素以內。

我想在用戶瀏覽個人網站並將:hover在突出顯示的術語上時在瀏覽器右側的框中顯示定義。 所以，我不但願將'definition'元素顯示在'text'元素內。

我幾乎放棄了，只是將javascript添加到了個人頁面，但這就是將來！ 咱們沒必要忍受CSS和HTML帶來的麻煩，告訴咱們在何處放置元素才能實現所需的效果！ 最後，咱們妥協了。

儘管文件中的實際HTML元素必須嵌套或包含在單個元素中才有效:hover彼此:hover目標，但css position屬性可用於在任何須要的position顯示任何元素。 我使用position：fixed將:hover動做的目標放置在用戶但願在用戶屏幕上的位置，而無論其在HTML文檔中的位置如何。

的HTML：

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

CSS：

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

在該示例中的目標:hover命令從內的元素#explainBox必須是#explainBox或也內#explainBox 。 分配給#definitions的位置屬性會強制其顯示在所需位置（在#explainBox外部），即便它在技術上位於HTML文檔中不須要的位置。

我知道，對多個HTML元素使用相同的#id被認爲是很差的形式； 可是，在這種狀況下，因爲#light實例在惟一的#id元素中的位置， #light能夠獨立描述。 在這種狀況下，是否有任何理由不重複id #light ？

---

#2樓

在將同一個元素懸停在給定元素上時，使用同級選擇器是設計其餘元素樣式的通常解決方案， 可是 僅當DOM中其餘元素遵循給定元素時，該方法纔有效 。 當其餘元素實際上應該在懸停的元素以前時，咱們該怎麼辦？ 假設咱們要實現一個信號條評級小部件，以下所示：

實際上，使用CSS flexbox模型能夠很容易地作到這一點，只需將flex-direction設置爲reverse ，以便元素以與DOM中相反的順序顯示。 上面的屏幕截圖來自使用純CSS實現的此類小部件。

95％的現代瀏覽器都很好地支持Flexbox 。

.rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; }

<div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div>

---

#3樓

只有這對我有用：

#container:hover .cube { background-color: yellow; }

凡.cube是的的CssClass #cube 。

在Firefox ， Chrome和Edge中進行了測試。

---

#4樓

在此特定示例中，您可使用：

#container:hover #cube {
    background-color: yellow;   
}

此示例僅適用於cube是container的子級的狀況。 對於更復雜的場景，您須要使用其餘CSS或JavaScript。

---

#5樓

若是多維數據集直接位於容器內部：

#container:hover > #cube { background-color: yellow; }

若是多維數據集位於容器旁邊（在容器關閉標籤以後）：

#container:hover + #cube { background-color: yellow; }

若是多維數據集在容器內的某處：

#container:hover #cube { background-color: yellow; }

若是多維數據集是容器的同級：

#container:hover ~ #cube { background-color: yellow; }