1
我希望class=dropdown的内容在悬停在class=header__nav-item--drobdownButton（PRODUKT）时缓慢滑动，但我不确定如何将其添加到我在CSS中的代码中。 我试图添加transition:max-height .8s ease-in;但id不起作用，我很确定我可以在inn CS中做到这一点，而不用更改我的代码太多，或者我可以用jquery解决这个问题... 如果有人能指出我在正确的方向这将是graet。将滑动条添加到悬停的导航栏
function highlightButtonOnDropdownActive() {
\t var activeClass = 'header__nav-item--active';
\t var dropdownButtonSelector = '.header__nav-item--dropdownButton'
\t $(dropdownButtonSelector).on('mouseenter', function(){
\t \t $(this).addClass(activeClass);
\t });
\t $('.header__nav-item:not(' + dropdownButtonSelector + ')').on('mouseenter', function(){
\t \t $(dropdownButtonSelector).removeClass(activeClass);
\t });
\t $('.dropdown').on('mouseleave', function() {
\t \t $(dropdownButtonSelector).removeClass(activeClass);
\t });
}
$().ready(function(){
\t highlightButtonOnDropdownActive();
});html, body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-container {
margin: 0 auto;
max-width: 1024px;
min-width: 320px;
padding: 0 10px;
}
.header {
background-color: #333;
}
.header__nav {
height: 60px;
letter-spacing: 2.6px;
line-height: 60px;
list-style-type: none;
margin: 0;
position: relative;
}
.header__nav-item {
display: block;
float: left;
}
.header__nav-item a {
color: #fff;
display: block;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.4s linear;
}
.header__nav-item--active a {
background-color: #ffffff;
color: #333;
font-size: 12px;
font-weight: 600;
}
.header__nav-item a:hover {
background-color: #ffffff;
color: #333;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
.header__nav-item--dropdownButton {
background-color: #333;
border: none;
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 600;
letter-spacing: 2.6px;
text-decoration: none;
text-transform: uppercase;
}
.header__nav-item--contact {
float:right;
}
.header__nav-item--dropdownButton:hover ~ .dropdown {
display: block;
}
.jumbotron {
background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center;
background-size: cover;
height: 300px;
}
.dropdown:hover {
display: block;
}
.dropdown {
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
left: 290px;
position: absolute;
top: 60px;
width: 160px;
z-index: 1;
}
.dropdown__link {
color: black;
display: block;
padding: 12px 16px;
text-decoration: none;
}
.dropdown__link:hover {
background-color: #f1f1f1
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet">
<link href="css/stylesheet.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type='text/javascript' src='js/script.js'></script>
<title>Smart-Home</title>
</head>
<body>
<nav class="header">
<div class="flex-container">
<ul class="header__nav">
<li class="header__nav-item header__nav-item--active">
<a href="index.html">Strona Glowna</a>
</li>
<li class="header__nav-item">
<a href="contact.html">O firmie</a>
</li>
<li class="header__nav-item header__nav-item--dropdownButton">
<a href="contact.html">Produkty</a>
</li>
<li class="header__nav-item">
<a href="contact.html">Nasi partnerzy</a>
</li>
<li class="header__nav-item header__nav-item--contact">
<a href="contact.html">Kontakt</a>
</li>
<div class="dropdown">
<a class="dropdown__link" href="#">Link 1</a>
<a class="dropdown__link" href="#">Link 2</a>
<a class="dropdown__link" href="#">Link 3</a>
</div>
</ul>
</div>
</nav>
</body>
</html>
谢谢你的帮助。 – stackmack