悬停文本时淡出图像答案

【问题标题】：fade image when you hover text悬停文本时淡出图像
【发布时间】：2014-10-31 22:30:58
【问题描述】：

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

【问题讨论】：

用 CSS 而不是 JS...

标签： css image text hover fade

【解决方案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>

浏览文字或图片时图片不褪色

【讨论】：