javascript - 鼠标移入图片这个效果如何以最少的代码实现？比如只用css可以吗？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 鼠标移入图片这个效果如何以最少的代码实现？比如只用css可以吗？

ringa_lee 2017-04-10 15:30:18

[JavaScript讨论组]

638

多张图片
1.鼠标移入图片，出现下拉按钮，mouseover show
2.点击下拉按钮，出现下拉框，click slidedown
3.移开下拉框区域，下拉框收回，mouseout slideup
4.移开图片，下拉按钮消失 mouseout hide

用css如何实现？或者简短的jquery代码？js代码呢？

ringa_lee

全部回复(1)

PHP中文网2017-04-10 15:32:18 1楼

<style>
.box {
    width: 100px;
    height: 100px;
    position: relative;
}
.select {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.box:hover .select{
    display: block;
}
.select ul {
    position: absolute;
    width: 100px;
    height: 40px;
    display: none;
}
.select li {
    width: 100px;
    height: 20px;
    float: left;
}
.select:hover ul{
    display: block;
}
</style>

就是点击效果实现不了，没测试