当我用鼠标悬停在图像上时,我正在尝试使其变暗。图像是一个六边形。我把它当做一个区块来使用。如何使高光仅显示在六边形图像上。
#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/
发布于 2017-03-14 13:45:44
#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>
发布于 2017-03-14 13:45:02
在鼠标悬停时突出显示图像此脚本会使图像变得暗淡,当您将鼠标放在它上面时,它会恢复到原来的大小。有没有可能这样做,反之亦然。就像图像处于正常状态,但当你将鼠标放在它上面时会变暗。谢谢。
<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)">
https://stackoverflow.com/questions/42778371
复制相似问题