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

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 有点不对劲。

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

你$().css()行也是不正确的。下面的代码说"更改嵌套在this中的.delete和.edit的CSS"。

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

您还需要在每次迭代后递增num，以便.card没有重复的 ID。

编辑：soilovecuu的答案可能更好。但是我将保留这个来显示正确的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>

Answer 3

同意@soilovecuu，这可以很容易地(并且可能应该)使用 CSS 完成。

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

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

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

我不知道你是否真的想要页面上的斜杠，所以我把它们放在那里以防万一。如果需要，您可以轻松删除所有"\"。

最后，请注意，没有内容(斜杠除外)呈现到页面。这是因为两件事。

1. 您的删除和编辑类具有display: none
2. 您在任何其他div 中都没有任何内容

我假设你是故意这样做的，但如果不是，你可以纠正1和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

1. 这将帮助您悬停在delete上并editdiv。

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