Question

当我用鼠标悬停在图像上时，我正试图使图像变暗。图像是六边形。我让它作为一个块工作。如何使高光仅出现在六边形图像上。

#container{
position: relative;
width: 687px;
height: 612px;
}
#main_image img{
width: 100%;
height: 100%;
background: #03CE7B;
}
#nutrition_icon img{
position: absolute;
bottom: 369px;
right: 300px;
}

#nutrition_icon_text
{
position:absolute;    
color:white;
font-size:22px;
font-weight:bold;
left:230px;
bottom:435px;
}

#wrap {
position:relative; 
width: 200px;  
height: 145px;
border: 1px solid grey
}

.nutrition_cover {
height: 200px;
width: 180px;
position: absolute;
top: 30px;
left: 200px;
background: rgba(0,0,0,.7);
display:none;
}

#nutrition_icon:hover .nutrition_cover {
display:block;    
}

JSFiddle链接https://jsfiddle.net/konpoly/rf84f6dt/

Answer 1

<强> Demo fiddle

    #container{
        position: relative;
        width: 687px;
        height: 612px;
    }
    #main_image img{
        width: 100%;
        height: 100%;
        background: #03CE7B;
    }
    #nutrition_icon img{
        position: absolute;
        bottom: 369px;
        right: 300px;
    }

    #nutrition_icon_text
    {
        position:absolute;    
        color:white;
        font-size:22px;
        font-weight:bold;
        left:230px;
        bottom:435px;
    }

    #wrap {
        position:relative; 
        width: 200px;  
        height: 145px;
        border: 1px solid grey
    }

    .nutrition_cover {
        height: 200px;
        width: 180px;
        position: absolute;
        top: 30px;
        left: 200px;
        background: rgba(0,0,0,.7);
        display:none;
    }

    /*#nutrition_icon:hover .nutrition_cover {
        display:block;    
    }*/
    #nutrition_icon img:hover
    {
       -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }

    <div id="container">
      <div id="main_image">
        <div class="tve_image_caption thrv_wrapper"><span class="tve_image_frame">
        <img src="http://www.cliniquevi.com/templates/clinique-vi/images/alveoles.png" alt="" class="" width="687"             height="612"></span></div>
        </div>
      <div id="nutrition_icon">
        <a href="http://vi.kmmagency.com/services/nutrition/1-2/" class="tveeee_active_hyperlink">
          <img src="http://www.cliniquevi.com/templates/clinique-vi/images/alveole-nutrition.png" alt="">  
        </a>
        <div class="nutrition_cover"></div>
      </div>
    </div>

Answer 2

在鼠标悬停上突出显示图像此脚本使图像变钝，当您将鼠标放在它上面时，它会恢复到原始大小。是否有可能这样做，反之亦然。就像正常状态下的图像一样，但是当你将鼠标放在它上面时会变暗。谢谢。

<SCRIPT language="JavaScript1.2">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
// -->
</SCRIPT>
<img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">

如何在鼠标悬停在图像上时突出显示图像？

2 个答案: