How can I accomplish this without use of javascript?

Question

I've got a page with a thumbnail on it (more to come, so the float:left property is necessary). The thumbnail is a Div, with an anchor in it, in that anchor is an image and some text. The text is below the image. The ancho rinks to a pdf file. Simple.

http://www.bridgecitymedical.com/forms

The problem is that the text gets underlined on hover when you hover over it, and the thumb image gets a border and the text gets underlined when you hover over the thumb image. What I need is for then you hover over either the text or the image, that they BOTH get applied their respective hover states, e.g. image gets a border, text gets underlined. At the moment they function by themselves, but they need to be one, or it just looks odd.

Here's the markup:

<div class="form">
    <a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
        <div class="form-wrapper">
        <div class="form-thumb">
            <img src="/forms/thumbs/1.jpg" alt="" />
        </div>
        Caption
        </div>
    </a>
</div>

and the css...

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}
.form-thumb:hover{
    border: 1px solid #000;
}

The text underline comes from another part of the tylesheet by default.

Can I do this without javascript!?

Solved by Chris (selected answer). Here's his solution, with my thumb in a fiddle...

http://jsfiddle.net/7MLjZ/1/

Chris Sobolewski · Accepted Answer · 2011-10-27 03:06:05Z

3

Use the :hover state on .form-wrapper instead.

<div class='wrap'>
    <div class='thumb'></div>
    Text!
</div>



.wrap{width:60px; height:80px;}
.thumb{width:60px; height:60px; background-color:blue;}
.wrap:hover{text-decoration:underline;}
.wrap:hover .thumb{border:5px solid black;}

http://jsfiddle.net/7MLjZ/

edited Oct 27, 2011 at 3:06

answered Oct 27, 2011 at 2:59

Chris Sobolewski

13k13 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alt Over a year ago

Oops, read your post wrong, so I deleted my first comment. BUT, it still does not work, as form-wrapper will put a border around the entire thumb, including the caption, I don't want the border around the caption too. :?

Chris Sobolewski Over a year ago

You're right. It needs split in to two statements. Check out the edit, and the jsfiddle.

alt Over a year ago

YES! Just updated the site with the new css you provided. THANK YOU! Also... check my Original question for a link to your fiddle... I updated it to look like my thumb front he site.

Chris Sobolewski Over a year ago

Glad to hear it! Happy to help. :)

GreyBeardedGeek · Accepted Answer · 2011-10-27 03:12:47Z

0

This should work to make both the image's div border and the caption's text black when hovered:

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}

.form:hover .form-wrapper .form-thumb {
    border: 1px solid #000;
}

a:hover {
    color:#000;
}

answered Oct 27, 2011 at 3:12

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

Collectives™ on Stack Overflow

How can I accomplish this without use of javascript?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related