1

当您将鼠标悬停在本网站上的链接上时，它们似乎重叠。已为 div 指定了正确的高度，但是一旦将鼠标悬停在链接上，它似乎会获得 165px 的高度

http://www.dawaf.co.uk/animate/

有没有办法将高度设置为 93px 以停止重叠？

#about {
    position: absolute;
    left: 0;
    top: 0;
    height: 89px;
    width: 336px;
}
span.title-link {
    font-size: 6.8em;
    font-weight: bold;
    font-family: 'Titillium Web', Arial, sans-serif;
    text-decoration: none;
    line-height: 93px;
    cursor: pointer;
    opacity: 0;
}

span.title-link a {
    color: #FFF;
    text-decoration: none;
}

span.title-link a:hover {
    color: #E91F4C;
}

#about-red {
    left: -104px;
    width: 545px;
}

#logo-red {
    height: 93px;
    width: 209px;
    position: absolute;
    left: 336px;
}   

/*Echo
------------------------------------------------------------ */
#gallery {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 434px;
}   

#gallery-echo {
    left: -202px;
    width: 714px;
}

#logo-echo {
    height: 93px;
    width: 280px;
    position: absolute;
    left: 434px;
}   

/*Events
------------------------------------------------------------ */
#contact-events {
    left: -216px;
    width: 862px;
}   

#contact {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 448px;
}   

#logo-events {
    height: 93px;
    width: 414px;
    position: absolute;
    left: 448px;
}
4

2 回答 2

2

跨度、a链接等内联元素会忽略“高度”属性。尝试：

.title-link {
    display: inline-block;
}
于 2013-03-27T18:40:55.607 回答
0

如果您绝对定位元素并固定大小，您将遇到更多的工作您的问题很复杂，因为您将 px 与 %/em 单位混合在一起。您的时间最好花在调整方法上，而不是解决这个问题。

  • 将绝对定位限制为尽可能少的元素。在这种情况下，您希望将导航项目包装在容器中，并绝对定位容器。
  • 不要固定高度；font-size与 with 一起line-height:SOME_MULTIPLE(i.e. 1.5)使用（vertical-align:middle无论元素是 inline/inline-block/block 都可以使用）。
  • 尝试概括您的样式并通过类将它们应用于多个元素，而不是通过 id 为单个元素设置样式。它使您的 CSS 更易于维护。

给你这些提示而不回答你的问题的原因......

  1. 最初将这个网站整合在一起会容易得多
  2. 更改导航项的文本或添加新的导航项的工作量会减少。
  3. 我已经看到了这种带有 id 的样式和使用的所有内容的固定位置/大小方法。它太多余和死板而无用。忘记最佳实践；它违反了基本的 CSS 和 HTML 原则，使每个人都难以处理简单的事情。打破习惯，让这个和你未来的所有项目变得更容易！
于 2013-03-27T19:21:10.037 回答