悬停文本时淡出图像

时间:2014-10-31 22:30:58

标签: css image text hover fade

您不知道如何编写函数,以便在将鼠标悬停在图片或文本上时淡化图像。 http://jsfiddle.net/Tiimsvk/8mwh03fr/



<script>
function showimg1(img){
    obr=document.getElementById('showingimg1');
    obr.src=img;
    return false;
}
</script>
<a href="#"><img src="http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg" onmouseover="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003C.jpg');" onmouseout="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg');" id="showingimg1"></a> 
 <a href="#" onmouseover="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003C.jpg');" onmouseout="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg');">RODINNÉ DOMY</a>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

<script>
function showimg1(img){
    obr=document.getElementById('showingimg1');
    obr.src=img;
    return false;
}
</script>
<style>
    #image{
//define all of the transitions, to make the animation smooth
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}

#image:hover{

opacity:0.8; // fade the opacity to a subtle lower value

    }
</style>
<a href="#"><img class="image" src="http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg" onmouseover="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003C.jpg');" onmouseout="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg');" id="showingimg1"></a> 
 <a href="#" onmouseover="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003C.jpg');" onmouseout="return showimg1('http://lumainterier.eu/image/interier/schodiska/scale/003D.jpg');">RODINNÉ DOMY</a>

当我浏览文本或图像时,

不会使图片褪色