Text and Image Highlighted same time

Question

I'm trying to do a menu.

I want the image and the text hightlighted at the same time. When the mouse is over the image, the text is highlighted, but when the mouse is over the text, the image doesn't change.

By the way, I'm not able to remove the image border with border-style: none;.

I hope anyone can help me. Thanks a lot!

<div class="iniciocenter">
    <div class="bloqueinicio">
        <a href="?page_id=7">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
        </a>
    </div> 
    <div class="bloqueinicio">
        <a href="?page_id=8">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
        </a>
    </div> 
</div>

Style

.iniciocenter {
    text-align: center;
}
.imghover2 {
    width:190px;
    height:190px;
}
.imghover2:hover {
    background-position:0px -190px;
}
.handlee{
    font-family: handlee;
    font-size: 24px;
    font-size: 1.714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.bloqueinicio {
    display:inline-block;
    text-align: center;
    font-family: handlee;
    font-size: 22px;
    font-size: 1.971rem;
    color: #365F8B;
    width:190px;
    height:50px;
}
.bloqueinicio a {
    text-decoration: none;
    color: #375F8F;
}
.bloqueinicio a:hover {
    color: #FF8000;
}

score 3 · Accepted Answer · edited May 23 '17 at 11:57

Add the below to the CSS to get the image highlighted on hovering the text.

.bloqueinicio a:hover .imghover2{
    background-position:0px -190px;
}

Demo Fiddle

EDIT: The border appears when the img tag is used without a src attribute (as kind of a placeholder for the image). Here you are placing the image as a background. Hence, my suggestion would be to use an empty div tag instead of the img tag like shown below to do away with that border.

<div class="bloqueinicio">
    <a href="?page_id=7">
        <div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
        </div>
        nosotros
    </a>
</div>

Demo Fiddle 2

Additional Info: You might want to have a look at this SO thread also prior to implementing the suggestion mentioned in the edit. Basically it says as per HTML 4.01, block level elements weren't allowed inside <a>. But with HTML5, it is perfectly valid.

score 1 · Answer 2 · answered Oct 10 '13 at 12:23

1

Change your HOVER rules like this:

.bloqueinicio:hover .imghover2 {
background-position:0px -190px;
}

...

.bloqueinicio:hover a {
color: #FF8000;
}

See the following fiddle: http://jsfiddle.net/H7DFA/

answered Oct 10 '13 at 12:23

Juna

328
3
8

score 1 · Answer 3 · answered Oct 10 '13 at 12:26

1

edit .imghover2:hover class like this :

.bloqueinicio a:hover img {
    background-position:0px -190px;
}

http://jsfiddle.net/mohsen4887/pVcQG/5/

answered Oct 10 '13 at 12:26

Mohsen Safari

6,669
5
42
58

Text and Image Highlighted same time

3 Answers3