elementy listy na liście zmieniają poszczególne style - jquery, html, css, css3, jquery-hover

Witajcie koledzy,

Mam następującą sytuację, w której nie wiem dokładnie, jak mogę to rozwiązać. Mam kilka pozycji na liście, gdy najedziesz na element lub klikniesz, ten element powinien wyglądać tak:

najedź i aktywuj element listy http://i61.tinypic.com/16atz6h.jpg

Mam następujący kod HTML, ale tak naprawdę nie wiem, jak mogę rozwiązać ten najlepszy sposób CSS3 (a nie obrazów), ponieważ zawiera strzałki w rogach:

<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/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/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/images/right-arrow.png">
</div>
</div>
</div>

Mam nadzieję, że ktoś może mi w tym pomóc.

Odpowiedzi:

PRÓBNY: http://jsfiddle.net/murid/wv107qgo/

Wziąłem trochę kreatywnej licencji z rozmiarami i kolorami, które powinieneś być w stanie naprawić według własnego uznania, ale działa dobrze. Trójkąt po prawej stronie jest wykonany w czystym 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>

Powinieneś wybrać klasę „select-row-item-internal” i zmienić jej tło po najechaniu myszką.

.select-row-item-inner:hover {

background-color: blue;

}

Po prostu użyj :wahać się. Na przykład:

.selectableRow:hover{
background-color: lightblue;
}

Możesz również zmienić obraz strzałki, używając czegoś takiego:

.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>