Jquery 将图像悬停并显示图标？

我已经为我的网站创建了一个砖石类型的投资组合。现在我只想添加一个悬停效果

我尝试将div opacity设置为1，并在悬停阶段将其设置为0。但我不需要隐藏我的边界。此外，我需要添加一个可点击的图标在中间区域悬停的div。就像这样。

这是我的密码

<a href="#">
 <div class="item i1">
 <img src="/images/epd.jpg" alt="">
 <p class="title">Title</p>
</div>

有什么建议吗？

HTML代码

   <div id='parent'>
        <div id='child_one'></div>
        <div id='child_two'style="">
            <a href="http://www.google.com">link
            </a>
        </div> 
    </div>

---

//这是你的问题的例子，只要你设置你的图像和它的位置

$（文档）.ready（函数（）{
$（“#锚定”）.hide（）；
$（'#imgdiv'）.mouseover（函数（）{
$（'#anchor'）.fadeIn（）；
});
$（'#imgdiv'）.mouseout（函数（）{
$（'#anchor'）.fadeOut（）；
});
});
.img div{
位置：相对位置；
宽度：300px；
高度：300px；
背景：#ccc；
}
.img部门img{
位置：相对位置；
宽度：100%；
身高：100%；
}
.img分区#锚{
位置：绝对位置；
宽度：100px；
高度：100px；
最高：50%；
左：35%；
边框：1px实心；
}
.img部门#锚定img{
宽度：100%；
身高：100%；
}
这是另一种逻辑，请使用此示例。
但您在两个div（“imgdiv和imgdiv2”）中给出的路径都是不同的


$（文档）.ready（函数（）{
$（“#layerid”）.hide（）；
$（'#imgdiv'）.mouseover（函数（）{
$（'layerid'）.fadeIn（）；
});
$（'#layerid'）.mouseout（函数（）{
$（'#anchor'）.fadeIn（）；
});
$（“#关闭”）。单击（函数（）{
$（'layerid'）.css（'display'，'none'）；
$（'imgdiv'）.css（'display'，'none'）；
});
$（'#imgdiv2'）.mouseout（函数（）{
$（'imgdiv'）.css（'display'，'none'）；
$（'imgdiv'）.fadeIn（）；
}); 
});
.img div{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：300px；
高度：300px；
背景：#ccc；
z指数：0；
}
.img-div2{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：300px；
高度：300px；
背景：#ccc；
z指数：-1；
}
.img-div2.img{
位置：相对位置；
宽度：100%；
身高：100%；
}
.img部门img{
位置：相对位置；
宽度：100%；
身高：100%；
}
#锚定{
位置：绝对位置；
宽度：100px；
高度：100px；
最高：50%；
左：35%；
边框：1px实心；
z指数：3；
}
#锚定img{
宽度：100%；
身高：100%；
}
.层{
位置：绝对位置；
左：0px；
顶部：0px；
背景：#600；
不透明度：0.5；
宽度：100%；
身高：100%；
边框：1px实心；
z指数：2；
}
#接近{
位置：绝对位置；
顶部：0px；
右：20px；
颜色：#fff；
光标：指针；
}

关闭&次；
那么你想要什么样的准确悬停效果呢？请提供一个工作示例…在这里发布外部链接可以吗？如果我理解，你想在悬停在div上时显示一个可单击的图标：可能你的不透明度更改的div不是正确的div。实际上，你可能应该添加一个包含图标的div，并更改其不透明度（换句话说，添加一个容器）。@MrWeb是的，您可以发布外部链接，但我们更喜欢使用显示问题所需的最少代码的代码段。将鼠标悬停在锚图像上时，锚图像将闪烁。
   <div id='parent'>
        <div id='child_one'></div>
        <div id='child_two'style="">
            <a href="http://www.google.com">link
            </a>
        </div> 
    </div>

        div#parent{width:200px;height:350px;border:1px solid black;position:relative}
        div#child_one{position:absolute;z-index:98;background:red;width:100%;height:100%;}
        div#child_two{z-index:0;position:relative;background:yellow;width:100%;height:100%;}
        div#child_two a{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:30px;height:30px;background:skyblue;}
        div#parent:hover div#child_two{z-index:99}