从 Html 而不是 Css 加载图像源

Question

我一直在为使用 Focus 的缩略图轮播使用一些代码，我只是想知道是否可以模仿轮播的功能，但改变图像加载到 html 中而不是在 css 中添加图像 url。使用焦点时可以做吗？

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');   }

http://jsfiddle.net/1h68hs7n/

Answer 1

是的，像这样<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>

从 Html 而不是 Css 加载图像源

Load Image Source from Html instead of Css

html

css

focus

image