關於css中hover的用法，如何編寫代碼才能完成下面的功能？還是說不能完成？

&
&& && &


僅僅用css如何完成如下功能：

1.滑鼠懸停在div2上的時候，div1發生變化。比如背景由白色變成紅色

---

前面幾位說的都不行的。目前css只能應用最後面一個部分中的元素。比如

.div1:hover + .div2

表示當div1被hover時div2的表現。但是當前的css無法選擇元素前面的兄弟（受限於文檔解析順序，所以不行

----

現在還不行。只能改變你的結構來實現相同的*表現*效果。

但是還在草案中的 主體感嘆號 可以做到（據說這應該是很多年之後事情

---

受到CSS選擇器的parse和執行機制影響，至少在CSS3選擇器的框架內，是不可能「通過後面的元素選擇前面的元素」或者「通過子元素選擇父元素」的，反之，「通過前面的元素選擇後面的元素」和「通過父元素選擇子元素」都是很常用的。

如果你可以調整下DOM結構，讓div2在div1的前面，那麼可以用.div2:hover+.div1來選中它。然後用其他奇技淫巧來實現布局。

呼喚CSS4吧！

---

css確實可以做很多事，不過這樣的設計場景和需求，還是用js解決最好。

---

給div1和div2加個wrapper，給這個wrapper加上class，然後設置該class的hover，這樣無論hover哪個元素，該class下的元素都會響應。然後.class .div2再設置hover不變化，也就是再重複一遍之前的樣式。

---

好像這樣可以實現

.div1:hover + div2{}

兼容性不好，還是考慮用js實現，或者::before, ::after 添加元素來實現

---

.div1:hover
{
// 改這裡
}


---

給樓主上代碼算了，保證符合樓主要求

& div {
height: 100px;
width: 200px;
display: inline-block;
color: #fff;
}

.div1 {
background: red;
position: absolute;
top: 500px;
}

.div2 {
background: green;
position: absolute;
left: 500px;
}

.wrapper {
width: 0;
height: 0;
position: relative;
}

.wrapper:hover&>.div1 {
background: #000;
}

.wrapper:hover&>.div1:hover {
background: red;
}
& &
&
&div1& &div2& & &


---

這樣做是行不通的，CSS的性質是本元素的樣式，hover作為偽元素屬性同樣只能應用到本元素上。如果想實現文中功能，可以用JS寫，就幾行代碼。

---

.div2:hover .div1{

background:red;

}

手機手打

---

如果不考慮兼容性，什麼都不考慮，你用CSS做沒人反對。在項目里勸你還是老實用JS，用JQ都比CSS好。不是所有瀏覽器都兼容偽類元素，當然大部分還是兼容的。

---

推薦閱讀：