我正在尝试创建动态 <ul>这样当我悬停在 <li> 上时(类详细信息)，它动态创建另一个 <li> (该类(class)的作业)在它下面。我有这个工作。
但是，当我离开 <li>我希望家庭作业列表消失。为此，我决定删除 <li>我离开时的家庭作业 <li> .问题是，如果我从不将鼠标悬停在该作业列表中，而只是将鼠标悬停在类元素详细信息中，它就不会消失。我是 jQuery 的新手，所以我可能会遗漏一些简单的东西。
在任何悬停之前
将鼠标悬停在第一类元素上
当我将鼠标移出元素时，我希望元素消失
但我想保留当我将鼠标悬停在作业列表中时它不会消失的功能:
当我将鼠标悬停在作业列表之外时，它就会消失(目前是这样)
这是我的代码:
jQuery.js
$(document).ready(function() {
$(".item").hover(
function(){
$(this).find('.class-item').find('.top').css("background", "#D0D0D0");
$(this).find('.class-item ').find('.bottom').css("background", "#B8B8B8");
$(this).css("border-color", "white");
$(this).css("margin-bottom", "0");
$('#classes li:eq(' + $( "li" ).index(this) + ')').after('<li class="hw"><ul><li class="hw-item">Homework 1</li><li class="hw-item">Homework 2</li></ul></li>');
var parent = $(this);
$(".hw").hover(
function(){
},
function(){
parent.css("margin-bottom", "2%");
$('#classes li:eq(' + ($( "li" ).index(parent) + 1) + ')').remove();
}
);
},
function(){
$(this).find(' .class-item ').find(' .top ').css("background", "#B8B8B8");
$(this).find(' .class-item ').find(' .bottom ').css("background", "#D0D0D0");
$(this).css("border-color", "#888888");
}
);
});
样式.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", monospace;
font-size: 24px;
}
body {
}
#left {
float: left;
height: 100%;
width: 60%;
background: black;
}
#right {
float: left;
height: 100%;
width: 40%;
padding: 1%;
background: black;
}
#classes {
height: 100%;
overflow-y: scroll
}
#classes::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
.item {
height: 150px;
margin-bottom: 2%;
border: 5px solid #888888;
}
.class-item {
height: 100%;
width: 100%;
display: inline-block;
}
.top {
width: 100%;
height: 50%;
text-align: center;
background: #B8B8B8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom {
width: 100%;
height: 50%;
text-align: center;
background: #D0D0D0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hw {
margin-bottom: 2%;
padding: 1%;
width: 100%;
display: inline-block;
}
.hw-item{
margin-bottom: 1%;
padding: 0.25%;
background: #D0D0D0;
border: 3px solid white;
}
h3 {
text-align: center;
}
index.html
<html>
<head>
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div id="left">
<img src="me.jpg"/>
</div>
<div id="right">
<ul id="classes">
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Algorithm Analysis</h3>
</div>
<div class="bottom">
COMPSCI 704
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Programming Language Concepts</h3>
</div>
<div class="bottom">
COMPSCI 431
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Physics 1 with Calculus</h3>
</div>
<div class="bottom">
PHYSICS 209
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Ethics</h3>
</div>
<div class="bottom">
COMPSCI 395
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Architecture</h3>
</div>
<div class="bottom">
COMPSCI 458
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
最佳答案
多亏了我帖子上的评论，我才能够避免使用 javascript 并仅通过 css 使用:
.class-item {
height: 150px;
width: 100%;
display: inline-block;
border: 5px solid #888888;
}
.homework {
padding: 1%;
display: none;
}
.class-item:hover + .homework {
display: block;
}
.homework:hover {
display: block;
}
关于javascript - 使用 jQuery 悬停动态显示 <li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35121801/