css怎么让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失

html-css017

css怎么让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失,第1张

css让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失，可以尝试一下代码

.xwcms {

margin: 0 auto

-webkit-border-radius: 110px

border-radius: 110px

-webkit-transition: -webkit-transform 0.2s ease-out

-moz-transition: -moz-transform 0.2s ease-out

-o-transition: -o-transform 0.2s ease-out

-ms-transition: -ms-transform 0.2s ease-out

}

.xwcms:hover {

-webkit-transform: rotateZ(180deg)

-moz-transform: rotateZ(180deg)

-o-transform: rotateZ(180deg)

-ms-transform: rotateZ(180deg)

transform: rotateZ(180deg)

}

<img src="img/jiaotou.png" class="xwcms" />

在img标签里面加上一个title 属性，即可；

<img src="" alt="" title="要显示的文字"/>

当鼠标悬浮在上面的时候，就会显示title里的文字；