CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin
Martin

Reputation: 21

Hidden div and stay appeared after hover

I have div which is hidden and i want on hover to appear and stay like that.

#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

#content:hover {
  opacity: 1;
}
<div id="content">
  TEXT
</div>

Upvotes: 1

Views: 71

Answers (4)

Shaggy
Shaggy

Reputation: 6796

No need for any JavaScript here; simply set the transition-delay property of the element to a ridiculously high time that will never (normally) be met and then reset it to 0s on :hover.

#content {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s 36000s; /*10 hours!*/
    opacity: 0;
}
#content:hover {
    opacity: 1;
    transition-delay:0s;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67738

You can do it with jQuery instead of CSS as in the snippet below, with addClass. But you have to add !important to the opacity: 1value as shown to override the initial setting.

$(document).ready(function() {
  $('#content').mouseenter(function() {
    $("#content").addClass("seeme");
  });
});
#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

.seeme {
  opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  TEXT
</div>

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

$(document).ready(function() {
  $('#div').on('mouseenter', function() {
    $(this).css('opacity', '1');
  });
});
#div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  TEXT
</div>

Upvotes: 1

sol
sol

Reputation: 22919

You can use jQuery hover()

$('#content').hover(
  function() {
    $(this).addClass('show');
  }
);
#content {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: opacity 1s;
  opacity: 0;
}

#content.show {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  TEXT
</div>

Upvotes: 3

Related Questions