您好,堆高车,
我有以下情况,我不知道该如何解决。我有一些列表项,将鼠标悬停在某个项目或onclick上时,该项目应如下所示:
我有以下HTML代码,但是我真的不知道如何解决CSS3的最佳方法(不适用于图像),因为它包含箭头:
<div class="select-items">
<h4>Available items:</h4>
<div class="select-row-item">
<div class="select-row-item-inner">
<div class="selectableRow" style="float: left;">First Item</div>
<img class="arrowRight" src="images/right-arrow.png">
</div>
</div>
<div class="select-row-item">
<div class="select-row-item-inner">
<div class="selectableRow" style="float: left;">Second Item</div>
<img class="arrowRight" src="images/right-arrow.png">
</div>
</div>
<div class="select-row-item">
<div class="select-row-item-inner">
<div class="selectableRow" style="float: left;">Third Item</div>
<img class="arrowRight" src="images/right-arrow.png">
</div>
</div>
</div>
希望有人可以帮助我。
DEMO:http://jsfiddle.net/murid/wv107qgo/
我花了一些具有大小和颜色的创意许可,您应该可以根据需要对其进行修复,但是效果很好。右边的三角形是用纯CSS完成的。
.select-items {
width: 300px;
border: 1px solid #eee;
color: #444;
font-family: Helvetica, Arial, 'sans-serif';
padding: 10px 20px;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #444;
display: block;
padding: 10px;
font-size: 12px;
position: relative;
height: 16px;
}
ul li a:after {
content:"";
width:0;
height:0;
border-top:18px solid transparent;
border-bottom:18px solid transparent;
border-left:18px solid #fff;
position: absolute;
right: -18px;
top: 0;
}
ul li a:hover {
background-color: #69a0ff;
color: #fff;
}
ul li a:hover:after {
border-left:18px solid #69a0ff;
}
ul li a i.arrow {
width: 6px;
height: 10px;
display: inline-block;
float: right;
background: url('http://s7.postimg.org/ze62pveef/arrow.png') right top no-repeat;
background-size: 6px 20px;
}
ul li a:hover i.arrow {
background-position: right bottom;
}
<div class="select-items">
<ul>
<li>
<a href="">First Item <i class="arrow"></i></a>
</li>
<li>
<a href="">Second Item <i class="arrow"></i></a>
</li>
<li>
<a href="">Third Item <i class="arrow"></i></a>
</li>
</ul>
</div>
您应该选择“ select-row-item-inner”类,并在悬停时更改其背景。
.select-row-item-inner:hover {
background-color: blue;
}
只需使用:hover。例如:
.selectableRow:hover{
background-color: lightblue;
}
您还可以使用以下方式更改箭头的图像:
.selectableRow:hover .arrowRight {
content: url("images/right-arrow-hover.png");
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
max-width: 250px;
background: #FDFDFD;
margin: 25px auto;
list-style: none;
}
ul li{
padding-right: 20px;
}
ul li a{
display: block;
padding: 10px 15px;
color: #555;
text-decoration: none;
position: relative;
}
ul li a:hover{
background: #5CA5FF;
color: #fff;
}
ul li a::before{
content: '>';
position: absolute; top: 50%; right: 5px;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
ul li a:hover:after {
content: '';
position: absolute; right: -38px; top: 50%;
border: 19px solid transparent;
border-left: 19px solid #5CA5FF;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
<ul>
<li><a href="#">item 1</a>
<li><a href="#">item 2</a>
<li><a href="#">item 3</a>
</ul>