是否可以使用css更改img src属性？

Question

我正在尝试用css更改img src(不是后台img src)

<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>  

#btnUp{
    cursor:pointer;
}
#btnUp:hover{
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

Answer 1

您可以使用 :

content: url("/_layouts/images/GEARS_AN.GIF")

Answer 2

还有另一种解决方法:使用CSS box-sizing.

HTML:

<img class="banner" src="http://domaine.com/banner.png">

CSS:

.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://domain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

http://css-tricks.com/replace-the-image-in-an-img-with-css/

Answer 3

你可以试试这样的

<img id="btnUp" src="empty.png" alt="btnUp" />  

或者

<div id="btnUp" title="btnUp"> <div/>  

#btnUp{
    cursor:pointer;
    width:50px;
    height:50px;
    float:left;       
}

#btnUp{
    background-image:url('x.png')
}

#btnUp:hover{
    background-image:url('y.png')
}

Answer 4

否 - CSS 只能用于更改 CSS 背景图像，不能用于更改 HTML 内容。

一般来说，UI 元素（而不是内容）无论如何都应该使用 CSS 背景呈现。交换类可以交换背景图像。