CSS悬停菜单项

Question

我的网站底部有一个固定的导航栏。我遇到的麻烦是，在我将鼠标放在文本上之前，悬停效果（背景）会滑动。当鼠标进入.item容器时，背景会滑动。基本上我只需要将鼠标悬停在文本而不是外部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

在你的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 2

虽然很少有嵌套/结构级别的问题可以纠正它们但是让你的代码工作从你提供的内容看它是否有帮助。

＆＃13;

＆＃13;

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


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

  e.stopPropagation();


});

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

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


});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

关于定位有很多答案，所以我想添加另一种风格，不同的那种和后退过渡，请参阅小提琴示例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进行了等待，这样，你就可以避免在飞行时移动所有内容并且放慢动画效果。

Answer 4

为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 5

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

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

DEMO

Answer 6

您在.item-container上有悬停效果，但是您应该将鼠标悬停在.item-top上，或者围绕要悬停的文字制作<p>标记，并将鼠标悬停在效果上p:hover