Question

京东活动页面装修鼠标经过变化代码

以图一框中的内容我想变成分别对应的第二张图，在DW中做的代码发到京东后台，会提示错误。
之前搜了一段代码，单个图片是可以实现，但是一放到<td></td>中间就不行了。求大神解答

图一：

图二：





Answer 1

HTML:

假设你结构是这样的

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS:

.wrapper {...}
.item {width:50px; height:50px;float:left} /* float左侧 */
.wrapper .item:nth-of-type(1) {  background:url(..图一地址.); } /* 第一个图的背景图 */
/*  到图四以此类推 */
.wrapper .item:nth-of-type(1):hover {
    background: url(...图一转换图地址)
}
.wrapper .item:nth-of-type(2):hover {
    background: url(...图二转换图地址)
}
/*  到图四以此类推 */

如果你希望可以点击链接的就把 <div class="item"> 全换成 <a class="item" href="..."> 但是 css里要把 a.item { display: inline-block; }

Answer 2

CSS文件中，hover设置有问题吧。你查看一下....