CODEWITHSUNDEEP
jqueryhtmlcssjquery-hover
Ramirez
Ramirez

Reputation: 193

onhover list items change particular styling

Hello fellow stackers,

I have the following situation where I do not know exactly how I can solve it. I have some list items, when onhover on a item or onclick, this item should look like this:

hover and active list item

I have the following HTML code, but do not really know how I can solve this the best means of CSS3 (and not with images) because it contains arrowed corners:

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

Hope someone can help me with this.

Upvotes: 0

Views: 61

Answers (4)

trs
trs

Reputation: 863

DEMO: http://jsfiddle.net/murid/wv107qgo/

I took a bit of creative licence with sizes and colors, which you should be able to fix as you see fit, but it works nicely. The triangle on the right is done in pure 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>

Upvotes: 2

Dmitriy
Dmitriy

Reputation: 4503

*{
    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>

Upvotes: 0

Donal
Donal

Reputation: 32713

Just use :hover. For example:

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

You can also change the image of the arrow, with something like this:

.selectableRow:hover .arrowRight {
   content: url("images/right-arrow-hover.png");
}

Upvotes: 0

prtnkl
prtnkl

Reputation: 302

You should select the "select-row-item-inner" class and change its background when hover.

.select-row-item-inner:hover {

    background-color: blue;

}

Upvotes: 0

Related Questions