css - 悬停文本时淡化图像

Question

您不知道如何编写一个函数，以便当您将鼠标悬停在图片或文本上时，使图像淡出。 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>

Answer 1

<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>

当我浏览文本或图像时不会使图片褪色