Javascript css转换的问题
因此，我创建了一个下拉菜单，当用户将鼠标悬停在某个节的标题或内容上时，div的大小将从0px更改为370px，以显示该节的内容。当用户缓慢（或以足够的速度）滚动每个部分时，一切都会顺利进行；但是，当用户滚动过快时，动画就会出现问题。我假设这是因为css转换——更具体地说是它们的时间安排。是否有更平滑的过渡 奖励：有人能告诉我，当用户查看某个部分时，如何更改标题的背景色吗？我希望在不添加任何id或类的情况下执行此操作 FYI:这是一个完全的重新设计，因为最初我用javascript编写了太多枯燥的代码，所以现在我用尽可能少的javascript编写这个下拉菜单Javascript css转换的问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我创建了一个下拉菜单，当用户将鼠标悬停在某个节的标题或内容上时，div的大小将从0px更改为370px，以显示该节的内容。当用户缓慢（或以足够的速度）滚动每个部分时，一切都会顺利进行；但是，当用户滚动过快时，动画就会出现问题。我假设这是因为css转换——更具体地说是它们的时间安排。是否有更平滑的过渡 奖励：有人能告诉我，当用户查看某个部分时，如何更改标题的背景色吗？我希望在不添加任何id或类的情况下执行此操作 FYI:这是一个完全的重新设计，因为最初我用javascript编写了太多枯燥的
<!DOCTYPE html>
<html>
<head>
<title>list</title>
<!--links in font-->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
<!--links in jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<style type="text/css">
/* do not include in production */
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: whitesmoke;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: white;
}
.cards {
background: white;
padding: 10px;
margin: 5px auto;
border: #DDD solid 1px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
/* INCLUDE */
#n-wrap {
width: 950px;
height: 600px;
background-color: whitesmoke;
overflow: hidden;
}
.n-titles {
line-height: 50px;
width: 950px;
height: 50px;
background-color: #888;
transition: background-color 0.5s ease;
}
.n-titles:nth-child(n+2):hover {
background-color: rgb(96, 223, 229);
cursor: pointer;
}
.n-titles:nth-child(n+2):hover + .n-items {
height: 370px;
}
.n-items {
height: 0px;
width: 100%;
transition: height 0.5s ease;
background-color: white;
}
.n-items:hover {
height: 370px;
}
#open {
height: 370px;
}
</style>
<body>
<center>
<div id="n-wrap" class="cards">
<div class="n-titles">FEATURED</div>
<div class="n-titles">Most Popular</div>
<div class="n-items pseudo-open" id="open"></div>
<div class="n-titles">On Sale</div>
<div class="n-items"></div>
<div class="n-titles">Newest</div>
<div class="n-items"></div>
</div>
</center>
</body>
<script type="text/javascript">
$(document).ready(function() {
//always has the first section displayed when the drop-down is not being hovered
$(".n-items, .n-titles:not(.n-titles:first-child)").hover(function() {
$("#open").removeAttr("id");
});
$(".n-items, .n-titles").mouseout(function() {
$(".pseudo-open").attr("id", "open");
})
});
</script>
</html>
列表
/*不包括在生产中*/
* {
保证金：0；
填充：0；
边界：0；
}
身体{
背景色：白烟；
字体系列：“Yanone Kaffeesatz”，无衬线；
颜色：白色；
}
.卡片{
背景：白色；
填充：10px；
保证金：5px自动；
边框：#DDD实心1px；
盒影：1px1px1pRGBA（0,0,0,0.1）；
}
/*包括*/
#n-wrap{
宽度：950px；
高度：600px；
背景色：白烟；
溢出：隐藏；
}
.n-标题{
线高：50px；
宽度：950px；
高度：50px；
背景色：#888；
过渡：背景色0.5s；
}
.n-titles:第n个子项（n+2）：悬停{
背景色：rgb（96223229）；
光标：指针；
}
.n-标题：第n个子项（n+2）：悬停+.n-项目{
高度：370px；
}
.n项{
高度：0px；
宽度：100%；
过渡：高度0.5s；
背景色：白色；
}
.n项：悬停{
高度：370px；
}
#打开{
高度：370px；
}
作为特色的
最受欢迎
出售
最新的
$（文档）.ready（函数（）{
//当下拉列表未悬停时，始终显示第一个部分
$（“.n-items，.n-titles:not（.n-titles:first child）”）.hover（函数（）{
$（“#打开”）.removeAttr（“id”）；
});
$（.n-items，.n-titles”）.mouseout（函数（）{
$（“.pseudo open”）.attr（“id”，“open”）；
})
});