顶部大小将是动态的，所以我应该在 jquery 上而不是在默认的 css 样式上初始化它。有人知道怎么做吗？
`
$('.box').hover(function(){
/*I need to inialize the $top size here before proceeding to the below css*/
$('.hover',this).css({'top':'0'});
});.box {
width: 200px;
height: 200px;
border: 2px solid red;
margin: 10% auto;
position: relative;
overflow: hidden;
}
.hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
background: blue;
transition: all 300ms ease 0s;
}
img {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_zAA8810ONGbOaB_F5hZ1prrTnC749ko6otAfyltJBSCKPgIm" alt="img">
<div class="hover"></div>
</div>
</div>`
最佳答案
你不需要 Javascript。
.box {
width: 300px;
height: 300px;
border: 2px solid red;
margin: 10% auto;
position: relative;
overflow: hidden;
}
.content {
display: none;
position: absolute;
background: green;
width: 100%;
height: 100%;
transition: all 300ms ease 0s;
display:block;
top:0%;
}
.box:hover .content {
top:-100%;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enter Leave Over Out</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="content"></div>
</div>
</div>
</body>
</html>关于javascript - 使用 jquery mouseover 事件在单个元素中添加 2 个 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52310034/