时间戳

首页 > 解决方案 > 使用 jquery mouseover 事件在单个元素中添加 2 个 css

javascript - 使用 jquery mouseover 事件在单个元素中添加 2 个 css

问题描述

顶部大小将是动态的，所以我应该在 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>

`

标签： javascriptjqueryhtmlcss

解决方案

你不需要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>

推荐阅读