[英]CSS how to place an image to the right of variable width text on roll over?
我有一個寬度可變的文本菜單,例如:
Home
Services
About Us
Contact
如何在css中懸停時將圖像定位到不同寬度文本的右側? 是否可以不使用固定寬度?
Home
Services •
About Us
Contact
要么
Home
Services
About Us
Contact •
現場演示http://tinkerbin.com/RrRtqfVf
這樣做
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
CSS
ul{
list-style:none;
}
li{
position:relative;
float:left;
clear:left;
margin-top:10px;
}
li:hover:after{
content:'';
background:red;
position:absolute;
right:-20px;
top:5px;
width:10px;
height:10px;
}
嘗試這個
HTML
<ul>
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li> Contact</li>
</ul>
CSS
ul{width:80px}
ul li:hover{background:url(http://hotels.online.com.sg/DB/icon/star_icon2.gif) right no-repeat}
我的建議,使用background-image
..
讓我們假設這是你的HTML:
<ul>
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
現在,使用此CSS來實現您的目標:
ul{list-style-type:none;}
ul li{width:120px;}
ul li:hover{background:url(your/image/path) no-repeat top right;}
如果您想在菜單中的每個項目中使用不同的圖像/圖標,請使用attributes
或其他類:
<ul>
<li data="home">Home</li>
<li data="services">Services</li>
<li data="about">About Us</li>
<li data="contact">Contact</li>
</ul>
你的CSS應該是這樣的:
ul{list-style-type:none;}
ul li{width:120px;}
ul li[data="home"]:hover{background:url(your/image/path1) no-repeat top right;}
ul li[data="services"]:hover{background:url(your/image/path2) no-repeat top right;}
ul li[data="about"]:hover{background:url(your/image/path3) no-repeat top right;}
ul li[data="contact"]:hover{background:url(your/image/path4) no-repeat top right;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.