[英]CSS how to place an image to the right of variable width text on roll over?
I have a menu of text with variable widths eg: 我有一个宽度可变的文本菜单,例如:
Home
Services
About Us
Contact
How can I position an image to the right of the different width text on hover in css? 如何在css中悬停时将图像定位到不同宽度文本的右侧? Is it possible without using a fixed width? 是否可以不使用固定宽度?
Home
Services •
About Us
Contact
or 要么
Home
Services
About Us
Contact •
Live demo http://tinkerbin.com/RrRtqfVf 现场演示http://tinkerbin.com/RrRtqfVf
Do this one 这样做
HTML 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 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;
}
My suggestion, use background-image
.. 我的建议,使用background-image
..
Lets assume this is your html: 让我们假设这是你的HTML:
<ul>
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
Now, use this CSS to achieve what you want: 现在,使用此CSS来实现您的目标:
ul{list-style-type:none;}
ul li{width:120px;}
ul li:hover{background:url(your/image/path) no-repeat top right;}
If you want different image/icon to each item in your menu, use attributes
or other class's: 如果您想在菜单中的每个项目中使用不同的图像/图标,请使用attributes
或其他类:
<ul>
<li data="home">Home</li>
<li data="services">Services</li>
<li data="about">About Us</li>
<li data="contact">Contact</li>
</ul>
And your CSS should look like: 你的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.