ongover список пунктів змінити особливий стиль - jquery, html, css, css3, jquery-hover

Привіт колеги штабелери,

У мене така ситуація, коли я точно не знаю, як я можу це вирішити. У мене є деякі елементи списку, коли під час переходу на елемент або onclick, цей елемент повинен виглядати так:

наведіть курсор і активуйте елемент списку http://i61.tinypic.com/16atz6h.jpg

У мене є такий 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/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>

Сподіваюся, хтось може мені допомогти у цьому.

Відповіді:

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-internal" і змінити його фон при наведенні курсору.

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