Question

在我的导航栏中，我只想悬停在元素上伸展并改变颜色，但似乎整个导航栏都拉伸了。我已经尝试改变必须悬停的东西以触发动画，但似乎没有任何工作。你能识别并纠正我的错误吗？

@keyframes mouse {
  0% {
    background-color: #35B1C2;
    height: 40px
  }
  100% {
    background-color: #2F9EBD;
    height: 60px
  }
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #35B1C2;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li:hover {
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-name: mouse;
}

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="aboutme.html">About Me</a></li>
  <li><a href="projects.html">Projects</a></li>
</ul>

Answer 1

试试这个：

            fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) {
            var recipes_obj = snapshot.val();
            let recipes = [];
            for (let id in recipes_obj) {
                let recipe = recipes_obj[id];
                recipe.id = id;
                recipes.push(recipe);
                console.log("recipes: ", recipes)
            }
            console.log("recipes outside", recipes);
            this.setState({ recipes: recipes });
        }.bind(this));

Answer 2

您可以删除overflow:hidden并添加

overflow:visible;
height:45px; /* The height of your navbar */

到您的ul元素。

Answer 3

您的代码实际上没有错误。会发生什么是ul框包含li框。因此，当您将鼠标悬停在li框上并且li框的高度从40px增加到60px时，包含该框的ul框也会延伸，因为它需要包含{ {1}}框。

所以，你只需要解决这个问题。我建议不要使用li框，但这只是我认为更有效的因为你意识到你并不真正需要它（你仍然需要包含一个导航栏）框，可能是ul或div）。

Answer 4

您尚未设置导航栏高度。因此，当悬停时li高度发生变化时，导航栏将调整其高度以适合内容。我会通过简单的过渡来实现这一目标，而不是动画。向导航栏添加最小高度并将过渡属性应用于ul标记。同时应用溢出：悬停时可见

请参阅下面的代码段

SELECT
    business_profile.busID,
    business_profile.busName,
    COUNT(business_offers.ofr_id) AS cntOffers,
    COUNT(business_rules.rule_id) AS cntRules
FROM business_profile
LEFT JOIN business_offers ON (business_offers.ofr_busID = business_profile.busID)
LEFT JOIN business_rules ON (business_rules.rule_busID = business_profile.busID)
WHERE business_profile.busID > 1
GROUP BY business_profile.busID
ORDER BY cntRules DESC, cntOffers DESC 
LIMIT 20

如何在导航栏上制作单个项目？

4 个答案: