悬停效果3

Question

我想，当你徘徊的背景颜色和文字颜色的变化来获得这样的页面http://smokefree.gov/health-effects

正如你看到的右侧栏上的一个李悬停效果

这是代码：

#ASIDE_1 { 
 
    box-sizing: border-box; 
 
    color: rgb(51, 51, 51); 
 
    float: left; 
 
    height: 528.171875px; 
 
    min-height: 30px; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 264.078125px; 
 
    transform-origin: 149.421875px 264.078125px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(51, 51, 51); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    margin: 13.4399995803833px 12.015625px 0px 8.3125px; 
 
    outline: rgb(51, 51, 51) none 0px; 
 
}/*#ASIDE_1*/ 
 

 
#DIV_2 { 
 
    color: rgb(51, 51, 51); 
 
    height: 232px; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 116px; 
 
    transform-origin: 149.421875px 116px; 
 
    border: 0px none rgb(51, 51, 51); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    outline: rgb(51, 51, 51) none 0px; 
 
}/*#DIV_2*/ 
 

 
#DIV_3 { 
 
    color: rgb(51, 51, 51); 
 
    height: 232px; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 116px; 
 
    transform-origin: 149.421875px 116px; 
 
    border: 0px none rgb(51, 51, 51); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    outline: rgb(51, 51, 51) none 0px; 
 
    overflow: hidden; 
 
}/*#DIV_3*/ 
 

 
#IMG_4 { 
 
    color: rgb(51, 51, 51); 
 
    display: block; 
 
    height: 232px; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 116px; 
 
    transform-origin: 149.421875px 116px; 
 
    border: 0px none rgb(51, 51, 51); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    outline: rgb(51, 51, 51) none 0px; 
 
}/*#IMG_4*/ 
 

 
#DIV_5 { 
 
    color: rgb(51, 51, 51); 
 
    height: 283.171875px; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 148.078125px; 
 
    transform-origin: 149.421875px 148.078125px; 
 
    border-top: 13px solid rgb(240, 240, 240); 
 
    border-right: 0px none rgb(51, 51, 51); 
 
    border-bottom: 0px none rgb(51, 51, 51); 
 
    border-left: 0px none rgb(51, 51, 51); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    outline: rgb(51, 51, 51) none 0px; 
 
}/*#DIV_5*/ 
 

 
#UL_6 { 
 
    color: rgb(84, 84, 84); 
 
    height: 283.171875px; 
 
    width: 298.859375px; 
 
    perspective-origin: 149.421875px 141.578125px; 
 
    transform-origin: 149.421875px 141.578125px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(84, 84, 84); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    margin: 0px; 
 
    outline: rgb(84, 84, 84) none 0px; 
 
    padding: 0px; 
 
}/*#UL_6*/ 
 

 
#LI_7 { 
 
    color: rgb(181, 96, 0); 
 
    height: 92.390625px; 
 
    min-height: 92.3999938964844px; 
 
    width: 283.921875px; 
 
    perspective-origin: 149.421875px 47.1875px; 
 
    transform-origin: 149.421875px 47.1875px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 0px none rgb(181, 96, 0); 
 
    border-right: 0px none rgb(181, 96, 0); 
 
    border-bottom: 2px solid rgb(240, 240, 240); 
 
    border-left: 0px none rgb(181, 96, 0); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(181, 96, 0) none 0px; 
 
    padding: 0px 0px 0px 14.9375px; 
 
}/*#LI_7*/ 
 

 
#A_8, #A_15, #A_22 { 
 
    color: rgb(0, 136, 204); 
 
    text-align: left; 
 
    text-decoration: none; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#A_8, #A_15, #A_22*/ 
 

 
#DIV_9, #DIV_16, #DIV_23 { 
 
    color: rgb(0, 136, 204); 
 
    display: inline-block; 
 
    height: 73.390625px; 
 
    text-align: left; 
 
    width: 232.8125px; 
 
    perspective-origin: 116.40625px 36.6875px; 
 
    transform-origin: 116.40625px 36.6875px; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#DIV_9, #DIV_16, #DIV_23*/ 
 

 
#H2_10 { 
 
    color: rgb(181, 96, 0); 
 
    height: 39px; 
 
    text-align: left; 
 
    text-rendering: optimizelegibility; 
 
    width: 220.21875px; 
 
    perspective-origin: 110.109375px 19.5px; 
 
    transform-origin: 110.109375px 19.5px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(181, 96, 0); 
 
    font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 12.5999994277954px 0px 0px; 
 
    outline: rgb(181, 96, 0) none 0px; 
 
}/*#H2_10*/ 
 

 
#P_11, #P_18, #P_25 { 
 
    color: rgb(84, 84, 84); 
 
    height: 26px; 
 
    text-align: left; 
 
    width: 232.8125px; 
 
    perspective-origin: 116.40625px 13px; 
 
    transform-origin: 116.40625px 13px; 
 
    border: 0px none rgb(84, 84, 84); 
 
    font: normal normal normal normal 17px/26.0399990081787px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 0px 8.39999961853027px; 
 
    outline: rgb(84, 84, 84) none 0px; 
 
}/*#P_11, #P_18, #P_25*/ 
 

 
#DIV_12 { 
 
    background-position: 0px 0px; 
 
    color: rgb(0, 136, 204); 
 
    float: right; 
 
    height: 35px; 
 
    text-align: left; 
 
    width: 28.390625px; 
 
    perspective-origin: 14.1875px 17.5px; 
 
    transform-origin: 14.1875px 17.5px; 
 
    background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ong-mobile-43x43.png) no-repeat scroll 0px 0px/90% padding-box border-box; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 25px 8.39999961853027px 0px 0px; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#DIV_12*/ 
 

 
#IMG_13, #IMG_20, #IMG_27 { 
 
    color: rgb(0, 136, 204); 
 
    height: 1px; 
 
    max-width: 100%; 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    width: 1px; 
 
    perspective-origin: 0.5px 0.5px; 
 
    transform-origin: 0.5px 0.5px; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#IMG_13, #IMG_20, #IMG_27*/ 
 

 
#LI_14 { 
 
    color: rgb(0, 128, 171); 
 
    height: 92.390625px; 
 
    min-height: 92.3999938964844px; 
 
    width: 283.921875px; 
 
    perspective-origin: 149.421875px 47.1875px; 
 
    transform-origin: 149.421875px 47.1875px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 0px none rgb(0, 128, 171); 
 
    border-right: 0px none rgb(0, 128, 171); 
 
    border-bottom: 2px solid rgb(240, 240, 240); 
 
    border-left: 0px none rgb(0, 128, 171); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(0, 128, 171) none 0px; 
 
    padding: 0px 0px 0px 14.9375px; 
 
}/*#LI_14*/ 
 

 
#H2_17 { 
 
    color: rgb(0, 128, 171); 
 
    height: 39px; 
 
    text-align: left; 
 
    text-rendering: optimizelegibility; 
 
    width: 220.21875px; 
 
    perspective-origin: 110.109375px 19.5px; 
 
    transform-origin: 110.109375px 19.5px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(0, 128, 171); 
 
    font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 12.5999994277954px 0px 0px; 
 
    outline: rgb(0, 128, 171) none 0px; 
 
}/*#H2_17*/ 
 

 
#DIV_19 { 
 
    background-position: 0px 0px; 
 
    color: rgb(0, 136, 204); 
 
    float: right; 
 
    height: 35px; 
 
    text-align: left; 
 
    width: 28.390625px; 
 
    perspective-origin: 14.1875px 17.5px; 
 
    transform-origin: 14.1875px 17.5px; 
 
    background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-blu-mobile-43x43.png) no-repeat scroll 0px 0px/90% padding-box border-box; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 25px 8.39999961853027px 0px 0px; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#DIV_19*/ 
 

 
#LI_21 { 
 
    color: rgb(96, 128, 24); 
 
    height: 92.390625px; 
 
    min-height: 92.3999938964844px; 
 
    width: 283.921875px; 
 
    perspective-origin: 149.421875px 47.1875px; 
 
    transform-origin: 149.421875px 47.1875px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 0px none rgb(96, 128, 24); 
 
    border-right: 0px none rgb(96, 128, 24); 
 
    border-bottom: 2px solid rgb(240, 240, 240); 
 
    border-left: 0px none rgb(96, 128, 24); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(96, 128, 24) none 0px; 
 
    padding: 0px 0px 0px 14.9375px; 
 
}/*#LI_21*/ 
 

 
#H2_24 { 
 
    color: rgb(96, 128, 24); 
 
    height: 39px; 
 
    text-align: left; 
 
    text-rendering: optimizelegibility; 
 
    width: 220.21875px; 
 
    perspective-origin: 110.109375px 19.5px; 
 
    transform-origin: 110.109375px 19.5px; 
 
    background: rgb(255, 255, 255) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(96, 128, 24); 
 
    font: normal normal bold normal 25px/39.0599975585938px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 12.5999994277954px 0px 0px; 
 
    outline: rgb(96, 128, 24) none 0px; 
 
}/*#H2_24*/ 
 

 
#DIV_26 { 
 
    background-position: 0px 0px; 
 
    color: rgb(0, 136, 204); 
 
    float: right; 
 
    height: 35px; 
 
    text-align: left; 
 
    width: 28.390625px; 
 
    perspective-origin: 14.1875px 17.5px; 
 
    transform-origin: 14.1875px 17.5px; 
 
    background: rgba(0, 0, 0, 0) url(http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-grn-mobile-43x43.png) no-repeat scroll 0px 0px/90% padding-box border-box; 
 
    border: 0px none rgb(0, 136, 204); 
 
    font: normal normal normal normal 17px/20px cabinregular, Arial, Helvetica, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 25px 8.39999961853027px 0px 0px; 
 
    outline: rgb(0, 136, 204) none 0px; 
 
}/*#DIV_26*/

<aside id="ASIDE_1"> 
 
\t <div id="DIV_2"> 
 
\t \t <div id="DIV_3"> 
 
\t \t \t <img alt="Male Teen" src="http://www.battalha.com/up/pic/2.1%20smoke%20effect.jpg" id="IMG_4" /> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="DIV_5"> 
 
\t \t <ul id="UL_6"> 
 
\t \t \t <li id="LI_7"> 
 
\t \t \t \t <a href="http://smokefree.gov/rewards-of-quitting" title="Live a smokefree life" id="A_8"></a> 
 
\t \t \t \t <div id="DIV_9"> 
 
\t \t \t \t \t <h2 id="H2_10"> 
 
\t \t \t \t \t \t Live a smokefree life 
 
\t \t \t \t \t </h2> 
 
\t \t \t \t \t <p id="P_11"> 
 
\t \t \t \t \t \t Discover the rewards of quitting 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="DIV_12"> 
 
\t \t \t \t \t <img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_13" /> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li id="LI_14"> 
 
\t \t \t \t <a href="http://smokefree.gov/cravings" title="Craving cigarettes?" id="A_15"></a> 
 
\t \t \t \t <div id="DIV_16"> 
 
\t \t \t \t \t <h2 id="H2_17"> 
 
\t \t \t \t \t \t Craving cigarettes? 
 
\t \t \t \t \t </h2> 
 
\t \t \t \t \t <p id="P_18"> 
 
\t \t \t \t \t \t Get tips for when the urge hits 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="DIV_19"> 
 
\t \t \t \t \t <img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_20" /> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li id="LI_21"> 
 
\t \t \t \t <a href="http://smokefree.gov/steps-on-quit-day" title="Quitting today?" id="A_22"></a> 
 
\t \t \t \t <div id="DIV_23"> 
 
\t \t \t \t \t <h2 id="H2_24"> 
 
\t \t \t \t \t \t Quitting today? 
 
\t \t \t \t \t </h2> 
 
\t \t \t \t \t <p id="P_25"> 
 
\t \t \t \t \t \t Review steps for your quit day 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="DIV_26"> 
 
\t \t \t \t \t <img alt="" src="/sites/all/themes/sfg/images/content/spacer.png" id="IMG_27" /> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
</aside>

Answer 1

如果你看看你链接到页面的源代码，是改变背景颜色和文字颜色都被应用的CSS规则如下：

.li-first:hover, 
.li-first:hover H2, 
.li-first:hover A, 
.li-first:hover A:visited H2 { 
    background:none repeat scroll 0 0 #b56000; 
    color:#ffffff; 
} 

... 

.li-second:hover, 
.li-second:hover H2, 
.li-second:hover A, 
.li-second:hover A:visited H2 { 
    background: none repeat scroll 0 0 #0080ab; 
    color: #ffffff; 
} 

... 

.li-third:hover, 
.li-third:hover H2, 
.li-third:hover A, 
.li-third:hover A:visited H2 { 
    background: none repeat scroll 0 0 #608018; 
    color: #ffffff; 
} 

因此，实际发生的事情是li元素本身的背景颜色发生了变化（对于三个li元素中的每一个元素都有不同的颜色），并且文本元素的后代元素NT的背景颜色和文字颜色都改变了（文字改为白色）。

您可以将相同的设计，你的代码，同时考虑到你的代码和网站代码之间的区别：

#LI_7:hover, #LI_7:hover h2, #LI_7:hover p { background-color:#b56000; color:#ffffff; } 
#LI_14:hover, #LI_14:hover h2, #LI_14:hover p { background-color:#0080ab; color:#ffffff; } 
#LI_21:hover, #LI_21:hover h2, #LI_21:hover p { background-color:#608018; color:#ffffff; } 

http://jsfiddle.net/9juf1nLf/

编辑：对不起，我没注意到图像已经改变！经过一番调查，这是一个正在改变图像的CSS规则：

.li-first:hover .image-note, 
.li-second:hover .image-note, 
.li-third:hover .image-note { 
    background: url("../images/content/smokefree-content-page-related-link-ro-mobile-43x43.png") no-repeat scroll 0 0/90% auto transparent; 
} 

那么是什么发生的是，他们正在与替代一个替代的整个图像时您将鼠标悬停在li。这也有点奇怪，因为.image-note类实际上应用于包含img元素的div。 img元素只是应用空白间隔符，而div实际上是将可见图像显示为其背景图像。

也有趣的是，他们使用完全相同的悬停图像为所有三个li s。这是可行的，因为虽然图像需要以不同的颜色着色，但当你将其放置在其上时，其上的不在其上，当你将悬停在它上面时，它对于所有三个li s都是相同的纯白色图像。

为了便于比较，这里有比普通白色图像的第一彩色图像：

http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ong-mobile-43x43.png

http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ro-mobile-43x43.png

无论如何，你可以用下面的应用给你的代码，以及：

#LI_7:hover #DIV_12, #LI_14:hover #DIV_19, #LI_21:hover #DIV_26 { background-image:url('http://smokefree.gov/sites/all/themes/sfg/images/content/smokefree-content-page-related-link-ro-mobile-43x43.png'); } 

http://jsfiddle.net/9juf1nLf/2/

Answer 2

从镀铬的 '检查元素' 竟被它d出现该列表正在使用CSS：悬停选择器。

.li_foo:hover { 
background: #B56000;color: #FFFFFF;} 

更多信息：http://www.w3schools.com/cssref/sel_hover.asp