CSS筆記 :hover改變另一個(gè)元素樣式

Xufc 發(fā)布于2019-08-29 12:54 / 1449人閱讀

摘要：寫(xiě)在前面近日，在做項(xiàng)目的時(shí)候遇到一個(gè)需求鼠標(biāo)懸停在元素時(shí)，改變?cè)貥邮斤@然，是要用到來(lái)寫(xiě)，但應(yīng)用的場(chǎng)景有點(diǎn)小講究，分為兩種情形。如有幫助，望不吝賜贊一枚，多謝，如有錯(cuò)誤還望不吝指出。

寫(xiě)在前面

近日，在做項(xiàng)目的時(shí)候遇到一個(gè)需求：

鼠標(biāo)懸停在A元素時(shí)，改變B元素樣式

顯然，是要用到:hover來(lái)寫(xiě)，但應(yīng)用的場(chǎng)景有點(diǎn)小講究，分為兩種情形。

情景1：A元素是B元素的父級(jí)

//情景1

  


A:hover B{
  //鼠標(biāo)經(jīng)過(guò)A元素時(shí)，B元素背景會(huì)變成黑色
  background:#000;
}

情景2：A元素與B元素相鄰且A緊接著B

如果B元素在A元素之前，是無(wú)法使用+選擇符的

//情景2



A:hover +B {
  //鼠標(biāo)經(jīng)過(guò)A元素時(shí)，B元素背景會(huì)變成黑色
  background:#000;
}

CSS選擇器表

最后，這是目前的CSS選擇器表，對(duì)應(yīng)的版本也有標(biāo)明。如有幫助，望不吝賜贊一枚，多謝，如有錯(cuò)誤還望不吝指出。逃。

GPU云服務(wù)器云服務(wù)器改變樣式改變 html 樣式 html點(diǎn)擊改變樣式另一個(gè)數(shù)組

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112221.html

相關(guān)文章

前端小白進(jìn)階筆記之多級(jí)菜單分享

摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作：首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...

Wuv1Up 2019-08-01 17:40 評(píng)論0 收藏0
前端小白進(jìn)階筆記之多級(jí)菜單分享

摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作：首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...

Mike617 2019-08-29 13:30 評(píng)論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

摘要：搜索引擎中有一個(gè)爬蟲(chóng)模塊，在頁(yè)面中使用諸如等強(qiáng)調(diào)式的標(biāo)簽，有利于，說(shuō)白了就是有利于被搜索到。定位相對(duì)定位不影響元素本身特性不使元素脫離文檔流。定時(shí)器如果是由事件控制的，要先關(guān)再開(kāi)，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導(dǎo)致不明錯(cuò)誤！！！ div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設(shè)置，相當(dāng)于給盒子加了厚度，使用此屬性后會(huì)改...

caikeal 2019-08-19 17:57 評(píng)論0 收藏0
前端學(xué)習(xí)筆記（CSS、JS基礎(chǔ)篇）

摘要：搜索引擎中有一個(gè)爬蟲(chóng)模塊，在頁(yè)面中使用諸如等強(qiáng)調(diào)式的標(biāo)簽，有利于，說(shuō)白了就是有利于被搜索到。定位相對(duì)定位不影響元素本身特性不使元素脫離文檔流。定時(shí)器如果是由事件控制的，要先關(guān)再開(kāi)，避免多次觸發(fā)而混亂。 CSS篇注意：css注釋使用/ /，而不是或者//，否則很容易導(dǎo)致不明錯(cuò)誤！！！ div padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設(shè)置，相當(dāng)于給盒子加了厚度，使用此屬性后會(huì)改...

xietao3 2019-08-30 12:54 評(píng)論0 收藏0
sass筆記-3|Sass基礎(chǔ)語(yǔ)法之樣式復(fù)用和保持簡(jiǎn)潔

摘要：區(qū)別在于，類是在中運(yùn)用的，混合器是在樣式表中使用的。基本用法選擇器繼承，用去繼承一個(gè)選擇器定義的所有樣式。繼承背后的基本實(shí)現(xiàn)思路背后最基本的想法是，如果繼承了，那么樣式表中的任何一處選擇器都會(huì)用這一選擇器組進(jìn)行替換和打開(kāi)。上一篇詳述了Sass如何嵌套、導(dǎo)入和注釋這3個(gè)基本方式來(lái)保持條理性和可讀性，這一篇更進(jìn)一步地闡述sass保持樣式復(fù)用和簡(jiǎn)潔的方式——混合器和選擇器繼承——這兩種方式...

SmallBoyO 2019-08-30 13:12 評(píng)論0 收藏0