Make a div a link and change the content on hover

Question

I am trying to make a div a link, and this works, not sure if i have done it correctly. But i also want the type in the div to change color. Could anyone help me and if you explain a bit i will be greatfull :D Trying to learn :)

Here is the html

    <div class="song_feature">
        <a href="#"></a>
        <div class="song_feature_content">
            <div class="break32"></div>
            <h1>1</h1>
            <div class="break10"></div>
            <div class="break45"></div>
            <h2>Lorem ipsum title</h2>
            <div class="break10"></div>
            <p>lorem ipsum</p>
        </div>
    </div>

And the css

.song_feature:hover {
background-color: #B5B5B5;
cursor: pointer;
}

Answer 1

This is easier to do if you use jQuery.

HTML:

<div class="song_feature">
    <a href="#" id="hover">Hover here</a>
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
</div>

JS:

$('#hover').hover(function(){
    $('.song_feature').css('background-color', '#f00');
});

run: http://jsfiddle.net/cS6h8/

Answer 2

Just try this in your CSS:

.song_feature:link {
  background-color: #000;
  cursor: pointer;
}
.song_feature:visited {
  background-color: #000;
  cursor: pointer;
}
.song_feature:hover {
  background-color: #B5B5B5;
  cursor: pointer;
}
.song_feature:active {
  background-color: #000;
  cursor: pointer;
}

The background color will be black until the mouse hovers over it. Just change the color accordingly.

Answer 3

First of all wrap the a around the div

<div class="song_feature">
    <a href="#">
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
       </a>
</div>

And if by 'type in the div' you mean the text (i am guessing here) type color:#your color like this :

 .song_feature:hover {
 background-color: #B5B5B5;
  cursor: pointer;
 } 

 .song_feature:hover a {
    color:#edc844;/*some random color*/
  } 

This works in IE7+, latest Mozilla, Safari, Chrome

Answer 4

I would suggest you do the opposite.

<a href="#" class="song_feature">
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
</a>

.song_feature {
    display: block;
}

.song_feature:hover {
    background-color: #B5B5B5;
}

Answer 5

As far as I can tell, your issue is with getting this to validate. Historically, the a element was inline, and as such was not technically allowed to encompass block level elements like div.

Note that I didn't say “couldn't” encompass them: block level links have pretty much always worked as you'd expect, it just wouldn't pass validation. With HTML5 paving the cowpaths, this has now been amended. As per this HTML Doctor article:

One new and exciting thing you can do in HTML 5 is wrap links round “block-level” elements... removing duplication and creating a much wider hit area to click.

In short, @Tbi45's solution is the way to go: wrap your a around the div. It reduces repetition, validates (as HTML5) and doesn't require JavaScript.

Check out this fiddle for an example. The important CSS is:

.song_feature>a {
    display: block;
}

Which ensures that the entire contents of your div is clickable.