我一直在使用Focus的缩略图轮播的一些代码,我只是想知道是否有可能模仿轮播的功能,但改变图像是在html中加载而不是必须有图像网址css。使用焦点时可以做到吗?
HTML:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>
的CSS:
.mdT {
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); }
答案 0 :(得分:2)
是的,就像这个<div style="background-image: url(...)"></div>
说到:focus
,没有,但使用mouseover
可能是一种选择。
更新
如果可以添加内部元素,您可以这样做
.mdT {
position: relative;
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}
.mdT span {
display: none;
}
.mdT:focus span {
display: inline-block;
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
}
<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img1">
<span style="background-image:url(http://placehold.it/256x256/555555&text=Image+1"></span>
</button>
<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img2">
<span style="background-image:url(http://placehold.it/256x256/555555&text=Image+2"></span>
</button>