Question

我有一个自定义的Twitter分享按钮，位于我页面的右下角。它是div中的一个图像，用于翻转，但它不会翻滚。甚至可以在div中添加翻转图像吗？那么有一种解决方法可以使图像翻转吗？

HTML：

<div id="twitter"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter','','Images/twitterrollover_06.png',1)"><img src="Images/twitter_06.png" width="46" height="51" ></a></div>

CSS：

#twitter {
font-family: "Bebas Neue";
color: #000;
margin: 0 auto;
padding: 0;
right: 40px;
bottom: -12px;
position: fixed;
z-index: 100;
font-size: 30px;
}

Answer 1

如果这是一个简单的图像翻转，请不要使用JS来使用CSS。

a.twitter {
   display: block;
   cursor: default;
   width: 400px;
   height: 300px;
   background: url('images/twitter.png') top left;
}

a.twitter:hover {
   background-position: center left;
}

a.twitter:active {
   background-position: bottom left;
}

用HTML标记它......

<div class="twitter">
    <a href="javascript:void(0)" class="twitter"></a>
</div>

Answer 2

你可以用javascript做到这一点。

<div class="twitter"><img src="1.png"/></div>
<script type="text/javascript">
    var t = document.getElementsByClassName("twitter")[0];//i only have one element with that tag so...
    //if you are going to put more you can loop through them
    prepareRollOver(t);//call the function to prepare the rollover
    function prepareRollOver(target){
       target.onmouseover = function (){
            img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
            img.src="src1.png"
       }
       target.onmouseout = function (){
            img = this.getElementsByTagName("img")[0];//only one img expected, so take the first of the array
            img.src="src2.png"
       }
    }
</script>

您也可以使用css这样做

.twitter{
    background:url("1.png");
}
.twitter:hover{
    background:url("10.png");
}

但是删除div中的img标签，如果要使用css，则不需要它更改src1.png和src2.png以匹配您的文件名。

div中的翻转图像？

2 个答案: