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