Question

我正在做这个“简单的水平菜单”，但我面临一个有趣的问题......

不知道如何解决这个问题的最简单方法：如果我应该使用css或jquery（可能太过分）

你有 HERE 一个前任。：我想要做的是将鼠标悬停在每个链接上并隐藏其边框。目前我正在为悬停区域（边界）增加一些宽度。如果你跟随我的话，导航内部的2个链接变得更加复杂。

我不知道我是否会在文字和边框上使用图片并在每次悬停时隐藏它们？或者

我应该如何实现这个设计？

谢谢

 <div class="Main">

        <ul>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>

        </ul>




    </div>

css：

 <style>

      .Main{ width: 900px; margin: auto;}
      .Main ul{ overflow: hidden;}
      .Main ul li{ float: left; list-style: none}
      .Main ul li a{
          width: 100px;
          height: 100px;
          background: #ffa07a;
          display: block;
      }

      .Main ul li a p{
          text-align: center;
          position: relative;
          top:40px;

      }
      .Main ul li a:hover{ background: #7cfc00; }
      .borders{
          border-right: 2px solid #7cfc00;

      }

    </style>

Answer 1

不知道我是否理解你的问题，但这是你想要的吗？

http://jsfiddle.net/RGd2P/1/

.Main ul li a:hover{
    background: #7cfc00;
    margin-left:-2px;
    width:101px;
    padding-left:1px;
}

Answer 2

你没有额外的宽度。这是CSS3 standard behavior：

'left'
+ 'margin-left'
+ 'border-left-width'
+ 'padding-left'
+ 'width'                   /* 100 px, bad - use 98 instead */
+ 'padding-right'
+ 'border-right-width'      /*  +2 px            +2 */
+ 'margin-right'
+ 'right'
                              =                =
= width of containing block /* 102 px,          100 */

如果要将包含块设置为固定大小，请使用上面的公式计算其宽度。另外，尽量保持标记尽可能简单并保持语义正确（demo）：

<div class="Main">
    <ul>
        <li><a>film</a></li>
        <li><a>film</a></li>
        <li><a>film</a></li>
        <li><a>film</a></li>
    </ul>
</div>

.Main{
    width: 900px;
    margin: auto;
}
.Main ul{
    width:400px;
    margin:auto;
    list-style: none;
}
.Main ul li{
    display: block;
    float: left;
    width: 98px;
    height: 100px;
    background: #ffa07a;    
    text-align: center;
    border-right: 2px solid #7cfc00;
}

.Main ul li a{    
    display:block;
    margin-top:40%;
}
.Main ul li:hover{ background: #7cfc00; }

Answer 3

在这里和那里有一些技巧你可以实现它。我摆脱了p标签并重新编写了css代码。看看http://jsfiddle.net/elclanrs/k4mcr/

Answer 4

只需在悬停中的标记后添加p标记...就像这样

.Main ul li a p:hover{ background: #7cfc00;width: 100px; }

感谢

这个水平菜单CSS中的一个有趣的问题

4 个答案: