Question

<div id="specials">
    <h2><a href="/hot-deals/">We have HOT DEALS with unbelievable prices!</a> | <a href="/pre-owned/">We have Pre-Owned boats!</a></h2> 

    <style>

        #specials {
            width:695px; 
            float:left; 
            padding: 0 10px; 
            height:38px; 
            margin:7px auto 10px 13px;
            background:#BAD6E3;
            border:2px solid #005C8A;
           -webkit-border-radius: 12px;
           -moz-border-radius: 12px;
           border-radius: 12px;
           -webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
           -moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
           box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
       }
       #specials:hover {
           width:695px; 
           float:left; 
           padding:0 10px; 
           height:40px; 
           margin:5px auto 10px 13px;
           background:#005C8A;
           border:2px solid #005C8A;
           -webkit-border-radius: 12px;
           -moz-border-radius: 12px;
           border-radius: 12px;
          -webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          -moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
      }
      #specials h2 {float:left; margin-top:8px; color:#005C8A; padding-left: 10px;}
      #specials h2 span {text-decoration:underline;}
      #specials h2 a {color:#005C8A; text-decoration:none; font-size:20px;}
      #specials h2 a span {color:#005C8A;}
      #specials h2 a:hover {color:#fff;}
    </style>
</div>

Answer 1

好吧，：hover应用于包含<div>元素，而不是单个<a>元素，这是为了仅显示悬停效果而需要执行的操作按钮。

我创造了一个小提琴来展示你如何做到这一点：http://jsfiddle.net/TJG8G/

修改

我做了什么......

最好的选择是将原始CSS与我的差异化，但主要观点是：

否：在容器上悬停样式。将容器中的:hover CSS应用于<a>元素。

将<a>元素设置为display: inline-block

使用填充和行高<a>元素进行填充，然后删除h2上的填充。

调整各个A元素的边界半径规则（左边的A只有左边的曲线，右边的A有右边的曲线。）这也需要在第二个a上添加一个类。 / LI>

Answer 2

如果我正确理解您的问题，您希望蓝色背景仅显示在您悬停的链接上。

在这种情况下，一个可能适合您的简单解决方案是将背景颜色从容器悬停移动到链接悬停。

<强> Example Fiddle

CSS：

#specials:hover {
  // existing styles

  // background:#005C8A; <- remove this
}

#specials h2 a:hover {
  color:#fff;
  background:#005C8A; // <- add it back here. 
}

我希望只有大约一半的泡泡在悬停时突出显示。只能突出整个泡沫

2 个答案: