CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1134176
user1134176

Reputation: 33

Image border on text mouseover

I have three product blocks that are next to each other. Each has an image and a name below. What I want to do it when you hover over the text it displays a border on the bottom of the image. I have a style set for image hover and it works when I hover over the image however not when I hover over the text.

Here is a jsfiddle.

Also the HTML I have:

<div class="container-product-row">
    <ul class="variations">
        <li>
            <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Cuff</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Dome</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Gladiator</h2></a>
        </li>
    </ul>  
</div> <!-- container product row -->​

CSS:

.container-product-row {
   margin-bottom:-20px;
}

.variations li {
    margin:10px; 
    width:183px
}

.variations li a, a:visited {
    display: block; 
    color:#000000; 
    text-decoration:none
}

.variations li a:hover { 
    color:#ff4baa;
}

.variations li a img {
    display: block; 
}

.variations li a img:hover {
    border-bottom:5px solid #ff4baa;
}

.variations {
    display: block;  
}

.variations > li {
    display: inline-block;
    vertical-align: top;
}

h2 {
    font-family: 'Arapey', serif; 
    font-weight:400; 
    font-size:12pt; 
    padding: 5px 10px 5px 5px;     
    font-style:italic; 
    font-weight:400
}

Upvotes: 1

Views: 265

Answers (3)

Andy
Andy

Reputation: 14575

As the text comes after the image in the DOM, the only way you can do this is by setting the :hover to the parent of the text and image, the li.

You can see the demo here

Alternatively, you can rearrange your HTML and then use sibling selectors

Upvotes: 4

povilasp
povilasp

Reputation: 2396

You should apply hover styles not with attributes on specific elements, but rather on parent elements. So this:

.variations li a img:hover { border-bottom:5px solid #ff4baa; }

Could become this:

.variations li:hover a img { border-bottom:5px solid #ff4baa; }

Also consider rewriting it for the text too.

Upvotes: 2

VisioN
VisioN

Reputation: 145368

Change to the following style:

.variations li:hover a img {
    border-bottom: 5px solid #ff4baa;
}

DEMO: http://jsfiddle.net/dCNKm/5/

Upvotes: 2

Related Questions