CSS 悬停菜单项

Question

我的网站底部有一个固定的导航。我遇到的问题是悬停效果（背景）在我将鼠标悬停在文本上之前就向上滑动了。目前，当我的鼠标进入 .item-container 时，背景会向上滑动。基本上我需要让悬停效果只在我的鼠标悬停在文本上而不是外部 div 上时发生。

我有一个 jsFiddle：https://jsfiddle.net/tebrown/dLz8fL80/

<nav>
    <ul>
        <li>
            <a href="#">
                <div class="item-container">
                    <div class="item-top">The Song</div>
                    <div class="item-bottom-song-content">The Song</div>
                    <div class="item-bottom-song">Have a Listen</div>
                </div>
            </a>
        </li>
        <li>
        ...
    </ul>
</nav>

如有任何帮助，我们将不胜感激。

干杯

Answer 1

您在 .item-container 上有悬停效果，但您应该在 .item-top 上进行悬停，或者在要悬停的文本周围做一个 <p> 标记并进行悬停对 p:hover

的影响

Answer 2

对 UL 和 Li 使用适当的嵌套，样式会更容易。不要在列表标签中使用 div 例子：

<ul>
    <li>
    <a href="#">The Song</a>
      <ul>
        <li class="item-bottom-song-content">The Song</li>
        <li class="item-bottom-song">Have a Listen</li>
      </ul>
    </li>

Answer 3

在您的 css 中更改此设置：

.item-container {
    top: 150px;
    position: relative;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.item-container:hover {
    height: 225px;
    line-height: 300px;
    top: -210px;
}

您的问题是您已将容器的初始高度设置为 225px，每当您将鼠标悬停在该区域时，它会弹出项目内容，即当鼠标悬停在底部项目文本上方时，内容会弹出。

您需要更改的是 .item-container 的身高。当它们没有悬停时，你必须将它设置为 30px，当你悬停其中一些时，你希望它显示它的原始高度 225px.

这是一个fiddle

Answer 4

我不确定这是否有效，但我认为它会：

nav ul li {
    width: 16.65%;
    float: left;
    text-align: center;
    line-height: 225px;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
}

DEMO

Answer 5

虽然很少有 nesting/structural 级别的问题确实可以纠正它们，但是让您的代码根据您提供的内容工作，看看它是否有帮助。

$('.item-top').find('span').hover(function(e) {


  $(this).parents('.item-container').css("top", "-225px");

  e.stopPropagation();


});

$('.item-container').mouseleave(function() {

  $(this).css("top", "0px");


});

html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/

html,
body {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/

body {
  margin: 0;
  background: #000e22;
}
dl,
menu,
ol,
ul {
  margin: 1em 0
}
dd {
  margin: 0 0 0 40px
}
/*
* Addresses paddings set differently in IE 6/7.
*/

menu,
ol,
ul {
  padding: 0
}
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
nav {
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  height: 225px;
  z-index: 999999;
}
nav ul {
  height: 225px;
  overflow: hidden;
}
nav ul li {
  width: 16.65%;
  float: left;
  text-align: center;
  line-height: 225px;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
}
nav ul li a {
  font-family: 'DINWeb-CondBold';
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
}
.item-container {
  top: 0;
  position: relative;
  height: 225px;
  line-height: 300px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.item-top,
.item-bottom {
  height: 225px;
  position: relative;
}
.item-bottom-song-content {
  height: 50px;
  position: absolute;
  color: #fff;
  background: #333;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-bottom-project-content {
  height: 50px;
  position: absolute;
  color: #fff;
  background: #51338f;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-bottom-behind-content {
  height: 50px;
  position: absolute;
  color: #fff;
  background: #a32d8f;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-bottom-batten-content {
  height: 50px;
  position: absolute;
  color: #fff;
  background: #30abdf;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-bottom-about-content {
  height: 50px;
  position: absolute;
  color: #fff;
  background: #ea158c;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-bottom-sharing-content {
  height: 50px;
  position: absolute;
  color: #333;
  background: #fff;
  z-index: 99;
  width: 100%;
  line-height: 50px;
}
.item-top {
  color: #ffffff;
  dispay: none
}
.item-bottom-song {
  background: #00ff00 url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #ffffff;
}
.item-bottom-project {
  background: #00ff00 url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #ffffff;
}
.item-bottom-behind {
  background: #00ff00 url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #ffffff;
}
.item-bottom-batten {
  background: #00ff00 url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #ffffff;
}
.item-bottom-about {
  background: #00ff00 url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #ffffff;
}
.item-bottom-sharing {
  background: #fff url("http://www.ambafrance-nz.org/IMG/jpg/DSCF2642.jpg?3829/99c4f531ec5ee485e00f5ac22e2466558b19c634") no-repeat center center;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#">
        <div class="item-container">

          <div class="item-top"><span>The Song<span></div>
          <div class="item-bottom-song-content">The Song</div>
        <div class="item-bottom-song">Have a Listen</div>
        
      </div>
      </a>

        </li>
        <li> <a href="#">
      <div class="item-container">
          <div class="item-top"><span>The Project</span>
          </div>
          <div class="item-bottom-project-content">The Project</div>
          <div class="item-bottom-project">Help</div>
        </div>
      </a>

    </li>
    <li>
      <a href="#">
        <div class="item-container">
          <div class="item-top"><span>Behind the Scenes</span>
          </div>
          <div class="item-bottom-behind-content">Behind the Scenes</div>
          <div class="item-bottom-behind">Take a Peek</div>
        </div>
      </a>

    </li>
    <li>
      <a href="#">
        <div class="item-container">
          <div class="item-top"><span>What's</span>
          </div>
          <div class="item-bottom-batten-content">What's</div>
          <div class="item-bottom-batten">Learn More</div>
        </div>
    </li>
    </a>

    <li>
      <a href="#">
        <div class="item-container">
          <div class="item-top"><span>About</span>
          </div>
          <div class="item-bottom-about-content">About</div>
          <div class="item-bottom-about">Get Acquainted</div>
        </div>
      </a>

    </li>
    <li>
      <a href="#">
        <div class="item-container">
          <div class="item-top"><span>Sharing is Caring</span>
          </div>
          <div class="item-bottom-sharing-content">Sharing is Caring</div>
          <div class="item-bottom-sharing">Join the Chatter</div>
        </div>
      </a>

    </li>
  </ul>
</nav>

Answer 6

有很多关于定位的答案，所以我想添加另一种样式，一种不同的前后转换，参见fiddle示例https://jsfiddle.net/dLz8fL80/3/

解释：

所以我们在 .item-container

上有这个转换

.item-container {
    top: 0;
    position: relative;
    height: 225px;
    line-height: 300px;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

还有这个 .item-container:hover

.item-container:hover {
    top: -225px;
    -webkit-transition: all 0.2s ease-in-out 200ms;
    -moz-transition: all 0.2s ease-in-out 200ms;
    -o-transition: all 0.2s ease-in-out 200ms;
    transition: all 0.2s ease-in-out 200ms;
}

当您的鼠标移动到 .item-container 时，将应用 :hover 过渡效果，当您的鼠标离开时，另一个将执行此效果。

所以我在 :hover 上应用了一个等待，这样，你就可以避免在飞过时移动所有东西，并且离开动画更慢。

CSS 悬停菜单项

CSS Hover Menu Item

html

css

navigation