html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









sw

尾部連結 hbbb(xx)

2018年3月13日 星期二

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選擇器

沒有留言:

張貼留言