我看不懂这份菜单,希望有人能帮我。
我有一个div,它是悬停的,我试图让它显示几个菜单选项(尽管在这个例子中只有一个)。但是一旦光标离开主btn,菜单就会折叠回来。
有人能帮帮忙吗?
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.upload-media:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
发布于 2018-07-13 04:58:59
问题是,一旦您不再将鼠标悬停在.upload-media
div
上,CSS :hover
选择器就不再有效。您可以使用jQuery的$().hover()
函数和它的$().css()
函数来更改类的CSS。
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
/*.upload-media:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}*/
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.upload-media').hover(function(){
$('.upload-image').css('transform','translate(40px,-45px)');
});
</script>
纯Javascript方法(为mouseover
添加一个事件监听器,并在upload-image
悬停时向upload-media
添加一个类):
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.upload-image-visible {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
<script>
document.getElementsByClassName("upload-media")[0].addEventListener("mouseover", function(){
document.getElementsByClassName("upload-image")[0].classList.add("upload-image-visible");
});
</script>
https://stackoverflow.com/questions/51314178
复制相似问题