hover another css

css hover after

<center>
<div id="Adiv">
<img id="Aimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="text"></div>
</div>
</center>
<style>#Aimg ,#Adiv {height:100px ;width:150px;} 
#text:after  {content: "滑鼠請移到上圖"} 
#Adiv:hover  #text:after{content: "滑鼠可以離開"} </style> 

hi

hi

<center>
<div id="Bdiv">
<img id="Bimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="Atext">hi</div>
<div id="Btext">hi</div>
<div id="Ctext"></div>
</div>
</center>
<style>#Bimg , #Bdiv {height:100px ;width:150px;} 
#Ctext:after  {content: "滑鼠請移到上圖"} 
#Bdiv:hover  #Ctext:after{content: "滑鼠可以離開"} </style> 

<div class="ot" id="WhoverA" style="background-color: azure; border: 8px outset gainsboro; float: left; height:600px; width: 48%;" >
<center>
<img id="img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="txt"></div>
</center>
<style>#img {height:100px ;width:150px;} 
#txt:after  {content: "滑鼠請移到上圖"} 
#img:hover + #txt:after{content: "滑鼠可以離開"} </style>
兩個獨立 div , hover 後面要加 +

<div id="div1">A</div> <div id="div2">B</div>	#div1:hover + #div2{  .css } 兩個獨立 div , hover 後面要加 +
<div id="div1">A <div id="div2">B </div> </div>	#div1:hover  #div2{  .css } div1 內 div2 hover 後面無需加 +

CSS hoverhovercss hover another滑鼠到止div:hover選擇器

hover another css

hover another css

當滑鼠移過去元素的時候，改變元素的 CSS 而已。可以換個 底圖 圖片改變字的顏色大小等等 ，我們來瞧瞧 CSS 怎麼辦到的吧：

<div id="div1">A</div> <div id="div2">B</div>	#div1:hover + #div2{  .css } 兩個獨立 div , hover 後面要加 +
<div id="div1">A <div id="div2">B </div> </div>	#div1:hover  #div2{  .css } div1 內 div2 hover 後面無需加 +

<center> <img id="Aimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" /> <div id="text"> </div> </center> <style> #Aimg{height:100px ;width:100px;} #text:after {content: "滑鼠請移到上圖"} #Aimg:hover + #text:after{content: "滑鼠可以離開"} </style>

00

<center> <div id="Adiv"> <img id="Aimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" /> <div id="text"> </div> </div> </center> <style> #Aimg ,#Adiv {height:100px ;width:150px;} #text:after {content: "滑鼠請移到上圖"} #Adiv:hover #text:after{content: "滑鼠可以離開"} </style>

00

<center> <div class="circle"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" width="200" height="200"> </div> </center> <style> .circle img {transition: 1s ease;} .circle img:hover {border-radius:50%;transition: 1s ease;} </style>

00

DIV CSS z-index

DIV CSS z-index

做出區塊或圖片的堆疊效果，必須搭配上 position 語法來設定區塊的位置，才能做出疊在一起的效果，HTML 區塊 div1 先寫， 而 div2 div3 div4 寫在 div1 後面， 因此 div2 重疊在 div1 上方。
要改變 div1 及 div2 重疊次序，我們可以在 div 加入 z-index 元素，那個 z-index 的值越大重疊越靠高位置，如下列 div1 z-index 為1，div2 z-index 為1，div1 顯示在 div2 上方。
在 style CSS 設定 #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"}，在 div 內文字後加入 z-index=0。

再 style CSS 設定 #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after{content: " z-index=1"}， 當 滑鼠 移到 div 上 div 內文字後加入 z-index=1。

再 style CSS 設定 #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1}，當 滑鼠 移到 div 上 div 設定 z-index=1。

<style type="text/css"> #div1 ,#div2 ,#div3 ,#div4 { z-index: 0; text-align:center; width: 200px; height:60px; position: fixed; } #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"} #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after {content: " z-index=1"} #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1} </style> <div id="div1" style="top:30px;left:30px;background-color: #ffd382;" >div 1 </div> <div id="div2" style="top:70px;left:70px;background-color: #ff3392;">div 2 </div> <div id="div3" style="top:110px;left:110px;background-color: #ff6602;">div 3 </div> <div id="div4" style="top:150px;left:150px;background-color: #ffd333;">div 4 </div>

00

, , , , ,