make parent div background change and not child - css

Question

I have the current set up:
CSS:
.song {
width: 100%;
border-top-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background: #fcfff4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWYxZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcfff4 0%, #eaf1f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#eaf1f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#eaf1f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#eaf1f2',GradientType=0 ); /* IE6-8 */
}
.song :hover {
background: #9e9e9e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllOWU5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWQxZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #9e9e9e 0%, #d1d1d1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9e9e9e), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* IE10+ */
background: linear-gradient(to bottom, #9e9e9e 0%,#d1d1d1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9e9e', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-8 */
}
.song #title {
font-weight: bold;
padding-top: 3px;
padding-right: 3px;
padding-left: 10px;
}
.song #artist {
padding-right: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
HTML:
<div class="song">
<div id="title">Ghosts N Stuff</div>
<div id="artist">deadmau5</div>
</div>
<div class="song">
<div id="title">Atom (Original Mix)</div>
<div id="artist">Nari & Milani</div>
</div>
<div class="song"></div>
My goal is to have the whole background of the song div change backgrounds rather than the sub divs inside of it.
Any suggestions on the easiest way to achieve this?
Thanks

Answer 1

Working jsFiddle Demo
You wrote :hover selector with an extra space, change it to this:
/* there is no space before/after `:` */
.song:hover {
}
Also you shouldn't have multiple elements with the same id.
ID attributes must be unique on the page. Otherwise, use classes:
<div class="song">
<div class="title">Atom (Original Mix)</div>
<div class="artist">Nari & Milani</div>
</div>
And in your CSS:
.song .title {
font-weight: bold;
padding-top: 3px;
padding-right: 3px;
padding-left: 10px;
}
.song .artist {
padding-right: 3px;
padding-bottom: 3px;
padding-left: 10px;
}