CODEWITHSUNDEEP
jquerycss
Sam Gal
Sam Gal

Reputation: 39

Display a div if another div is hovered using Jquery

how to display a div inside a div if hovered?, I'm trying to do this but there's something wrong, nothing appear.

code:

$(document).ready(function() {
 var num = 0;
 $("#add").click(function() {
  $("main").append('<div class="card" id="photo' + num.toString() + '" style="width: 20rem;">\
     <div class="layer"></div>\
     <div class="card-block">\
     <h4 class="card-title" id="title' + num.toString() + '"></h4>\
     <p class="card-text" id="text' + num.toString() + '"></p>\
     </div>\
     <div class="card-block">\
         <div class="delete">Del<div>\
         <div class="edit">edit<div>\
     </div>\
     </div>');

 $(".card").hover(function() {
     $(this > ".delete").css("display", "block");
     $(this > ".edit").css("display", "block");
 });

css

.delete {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    top: 40px;
    left: 120%;
    display: none;
}
.edit {
    width: 35px;
    height: 35px;
    background-color: green;
    border-radius: 50%;
    position: relative;
    bottom: 24px;
    right: 40px;
    display: none;
}

Upvotes: 1

Views: 286

Answers (5)

perumal N
perumal N

Reputation: 651

Try this code

Use this jquery and css to div hover

  1. This will helps you to hover the delete and edit div.

Jquery

$(document).ready(function(){        
var num = 0;
     $("#add").click(function() {
      $("main").append('<div class="card" id="photo' + num.toString() + '" style="width: 20rem;">\
         <div class="layer"></div>\
         <div class="card-block">\
         <h4 class="card-title" id="title' + num.toString() + '"></h4>\
         <p class="card-text" id="text' + num.toString() + '"></p>\
         </div>\
         <div class="card-block">\
             <div class="delete">Del<div>\
             <div class="edit">edit<div>\
         </div>\
         </div>');
        $(".card").hover(function() {
         $(".delete").addClass('delete_pop');
         $(".edit").addClass('edit_pop');});
});

CSS

.delete {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: relative;
top: 40px;
left: 120%;
color: #fff;
display: none;}


.edit {
width: 35px;
height: 35px;
background-color: #000;
border-radius: 50%;
position: relative;
bottom: 24px;
right: 40px;
display: none;}



.card{
height: 100px;
width: 100px;
background: red;}

.delete_pop{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
top: 40px;
left: 120%;
color: #fff;
background-color: yellow;
transition: scale(1.3)(0.8);}

.edit_pop{
width: 35px;
height: 35px;
border-radius: 50%;
position: relative;
bottom: 24px;
right: 40px;
display: block;
background-color: green;
transition: scale(1.3)(0.8);}

Upvotes: 0

Corey
Corey

Reputation: 5818

Agree with @soilovecuu, this could be easily done (and probably should) with CSS.

However, in sticking with Javascript and Jquery: similar to @rideron89, the javascript (and HTML) is off. I've made some changes (and taken some liberties) to the JS. The primary difference from the other answer is consolidating the event listeners. You could attach one listener to the main element using .card as the selector parameter. This will essentially listen for any future card elements.

Also, added mouseleave.

$(document).ready(function() {
  var num = 0;
  
  $("main").on('mouseover mouseleave', '.card', function(e) {
    var d = e.type === 'mouseover' ? 'block' : '';
    $(".buttons", this).css("display", d);
  });
  
  $("#add").click(function() {
    num++
    $("main").append('<div class="card" id="photo' + num.toString() + '" style="width: 20rem;">\
      <div class="layer"></div>\
      <div class="card-block">\
        <h4 class="card-title" id="title' + num.toString() + '"></h4>\
        <p class="card-text" id="text' + num.toString() + '"></p>\
      </div>\
      <div class="card-block buttons">\
         <div class="delete">Del</div>\
         <div class="edit">edit</div>\
      </div>\
    </div>');
  });
 });
.card {
  display:block;
  padding:10px;
  background: #eee;
  margin: 2px;
  height: 100px;
  position: relative;
}
.buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
}
.delete {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
}
.edit {
    width: 35px;
    height: 35px;
    background-color: green;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<main id="main"></main>
<button id="add">Add</button>

Upvotes: 1

Christian Boyer
Christian Boyer

Reputation: 48

You had a few syntax errors. Please see below. Also, I took advantage of template literals to help with your multi-line string interpolation.

I couldn't tell if you actually wanted the slashes on the page or not, so I put them in there in case. You can easily remove all of the "\" if you want.

Finally, note that no content (besides the slashes) is being rendered to the page. That's because of two things.

  1. Your delete and edit classes have display: none
  2. You don't have any content in any of the other divs

I'm assuming you did these on purpose, but if not you can correct 1 & 2 and you will get content on the page.

HTML

<div id="main">
    <div id="add">Click Me</div>
</div>

JS

$(document).ready(function() {
    var num = 0;
    $("#add").click(function() {
    //"main" should be "#main" assuming there is a div called "main"
    //changed "'" to "`" for multiline strings
    $("#main").append(`
        <div class="card" id="photo${num.toString()}" style="width: 20rem;">\\
        <div class="layer"></div>\\
        <div class="card-block">\\
        <h4 class="card-title" id="title${num.toString()}"></h4>\\
        <p class="card-text" id="text' + num.toString() + '"></p>\\
        </div>\\
        <div class="card-block">\\
        <div class="delete">Del<div>\\
        <div class="edit">edit<div>\\
        </div>\\
        </div>`);

    }); // closing brackets were missing

    $(".card").hover(function() { // moved this inside ready function
    $(this > ".delete").css("display", "block");
    $(this > ".edit").css("display", "block");
    });
});

Upvotes: 0

cuongtd
cuongtd

Reputation: 3182

why don't you use css like this:

<style>
    .card:hover .delete{
         display:block;
      }
    .card:hover .edit{
         display:block;
      }
</style>

Upvotes: 1

rideron89
rideron89

Reputation: 531

You're JavaScript is a little wrong.

I am saving the new div into its only element so we can add the hover event to it specifically. Previously, I think you were likely adding a new hover event to all .cards. You'd end up with multiple events firing needlessly.

You're $().css() lines were incorrect as well. The code below is saying "change the CSS of .delete and .edit nested inside this".

$(".delete", this).css("display", "block");
$(".edit", this).css("display", "block");

You also need to increment num after each iteration so you're .cards don't have duplicate IDs.

Edit: soilovecuu's answer is probably better. But I'm going to leave this up to show the correct JavaScript.

$(document).ready(function() {
  var num = 0;
  $("#add").click(function() {
    let $div = $('<div class="card" id="photo' + num.toString() + '" style="width: 20rem;">\
     <div class="layer"></div>\
     <div class="card-block">\
     <h4 class="card-title" id="title' + num.toString() + '"></h4>\
     <p class="card-text" id="text' + num.toString() + '"></p>\
     </div>\
     <div class="card-block">\
         <div class="delete">Del</div>\
         <div class="edit">edit</div>\
     </div>\
     </div>');

    num += 1;

    $("main").append($div);

    $div.on('mouseenter', function() {
      console.log('mouseenter');
      $(".delete", this).css("display", "block");
      $(".edit", this).css("display", "block");
    });
  });
});
.card {
  background: grey;
  width: 250px;
  height: 250px;
}

.delete {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: 40px;
  left: 120%;
  display: none;
}

.edit {
  width: 35px;
  height: 35px;
  background-color: green;
  border-radius: 50%;
  position: relative;
  bottom: 24px;
  right: 40px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add">
  Add
</button>

<main></main>

Upvotes: 1

Related Questions