CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Krishna
Krishna

Reputation: 157

Adding 2 css in a single element using jquery mouseover event

The top size will be dynamic so I should initialize this on the jquery and not on the default css style. Do anyone know how to do this?

`

$('.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>

`

Upvotes: 0

Views: 69

Answers (3)

Sparky
Sparky

Reputation: 297

You don't need 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>

Upvotes: 1

Gerard
Gerard

Reputation: 15796

You have an error in the jQuery code, the mouseenter is not closed properly. Change it into the following: 

$(".box").on({
  mouseenter: function() {
    $('.hover', this).css({'display': 'block'});
    $('.hover', this).css({'top': '100%'});
    $('.hover', this).css({'top': '0'});
  },
  mouseleave: function() {
    $('.hover', this).css({'top': '-100%'});
  }
});

Upvotes: 0

Baxet
Baxet

Reputation: 85

What do you want to do by first setting top to 100%, then to 0? 0 will override the previous settings (100%). You also have a missing closing bracket ( '}' ) after the mouseenter function.
CSS Only Solution
Do I correctly assume that you want a colored overlay on top of the .box on hover? You can do it with pure css, easy example is available on W3Schools and here's a JSFiddle created from your example. I just switched hover class to overlay to avoid confusion.

.box {
   width: 300px;
   height: 300px;
   border: 2px solid red;
   margin: 10% auto;
   position: relative;
   overflow: hidden;
}
.overlay  {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: green;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.box:hover .overlay{
  top:0;
  height:100%;
}

The .box:hover .overlay rule is the key - it means it gives this style to the div with overlay class when you hover over it's container - the .box div.

Upvotes: 0

Related Questions