京东活动页面装修鼠标经过变化代码 10
以图一框中的内容我想变成分别对应的第二张图,在DW中做的代码发到京东后台,会提示错误。之前搜了一段代码,单个图片是可以实现,但是一放到<td></td>中间就不行了。求大...
以图一框中的内容我想变成分别对应的第二张图,在DW中做的代码发到京东后台,会提示错误。
之前搜了一段代码,单个图片是可以实现,但是一放到<td></td>中间就不行了。求大神解答
图一:
图二: 展开
之前搜了一段代码,单个图片是可以实现,但是一放到<td></td>中间就不行了。求大神解答
图一:
图二: 展开
2个回答
展开全部
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; }
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询