1

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

4

1 回答 1

2

工作 jsFiddle 演示

您编写:hover了带有额外空格的选择器，将其更改为：

/* there is no space before/after `:` */
.song:hover {
}

此外，您不应该有多个具有相同 ID 的元素。ID 属性在页面上必须是唯一的。否则，使用类：

<div class="song">
    <div class="title">Atom (Original Mix)</div>
    <div class="artist">Nari & Milani</div>
</div>

在你的 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;
}
于 2013-06-04T03:09:54.940 回答