悬停对列表项3的影响

Question

我试图像本页右侧栏中的那样悬停效果http://smokefree.gov/health-effects

正如您在悬停背景颜色和文本颜色变化时所看到的那样

这是代码：

＆＃13;

＆＃13;

#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*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

来自Chrome＆＃39;检查元素＆＃39;看来该列表正在使用CSS：悬停选择器。

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

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

Answer 2

如果您查看链接到的页面的来源，正在应用的更改背景颜色和文本颜色的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元素中的每一个都有不同的颜色），以及具有的后代元素文本内容同时改变了背景颜色和文本颜色（文本到白色）。

您可以在代码中应用相同的设计，同时考虑代码与网站代码之间的差异：

#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类实际上应用于包含div元素的img。 img元素只是应用空格，而div实际上是将可见图像显示为背景图像。

同样有趣的是，他们为所有三个li使用完全相同的悬停图像。这是有效的，因为虽然当不悬停在图像上时图像需要有不同的颜色，当 悬停在图像上时，它只是所有三个li的相同纯白图像。

为了进行比较，这里是与普通白色图像相比的第一个彩色图像：

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/