Question

如果在div内显示div如何悬停？我试图这样做但是出现了问题，没有出现。

码

$(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;
}

Answer 1

为什么不使用这样的css：

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

Answer 2

你的JavaScript有点不对。

我将新tab保存到其唯一元素中，以便我们可以专门为其添加div事件。以前，我认为您可能会向所有 hover添加新的悬停事件。你最终会不必要地发射多个事件。

您的.card行也不正确。下面的代码是＆＃34;更改嵌套在$().css()＆＃34;内的.delete和.edit的CSS。

this

每次迭代后，您还需要增加$(".delete", this).css("display", "block"); $(".edit", this).css("display", "block");，以便num不会有重复的ID。

编辑：soilovecuu的回答可能更好。但是我要离开这个以显示正确的JavaScript。

＆＃13;

.card

＆＃13;

$(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");
    });
  });
});

＆＃13;

.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;
}

＆＃13;

Answer 3

同意@soilovecuu，使用CSS可以轻松完成（也可能应该）。

但是，坚持使用Javascript和Jquery：类似于@ rideron89，javascript（和HTML）已关闭。我已经对JS做了一些改变（并采取了一些自由）。与其他答案的主要区别在于整合事件监听器。您可以使用main作为选择器参数将一个侦听器附加到.card元素。这将基本上听取任何未来的卡元素。

另外，添加了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>

Answer 4

你有一些语法错误。请看下面。此外，我利用模板文字来帮助您进行多行字符串插值。

我无法判断你是否真的想要页面上的斜杠，所以我把它们放在那里以防万一。您可以轻松删除所有＆＃34; \＆＃34;如果你愿意的话。

最后，请注意，没有内容（除了斜杠）正在呈现给页面。这是因为有两件事。

您的删除和编辑课程有display: none
您在任何其他div中都没有任何内容

我假设您是故意这样做的，但如果没有，您可以纠正1＆amp; 2，您将在页面上获得内容。

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");
    });
});

Answer 5

试用此代码

将此jquery和css用于div hover

这有助于您悬停delete和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);}

如果使用Jquery悬停另一个div，则显示div

5 个答案:

Jquery的

CSS