I want only about half of my bubble to highlight on hover. Can only seem to highlight the whole bubble

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

Well, the :hover is applied to the containing <div> element, not the individual <a> elements, which is what you'll need to do in order to show the hover effect on only that portion of the button.

I've created a fiddle to show how you might do it: http://jsfiddle.net/TJG8G/

EDIT

What I did...

Best bet would be to diff your original CSS and mine but the main points are:

1. No :hover styles on the container. Apply the :hover CSS from the container to the <a> elements instead.
2. Set the <a> elements to display: inline-block
3. Muck about with the padding and line-height <a> elements and remove the padding on the h2.
4. Adjust the border radius rules on the individual A elements (so that the left A only has a curve on the left and the right A has the curve on the right.) This also required adding a class to the second a.

Answer 2

If I understand your issue correctly, you want the blue background to only show up on the link you're hovering over.

In that case, a simple solution that may work for you is to move the background color from the container hover to the link hover.

Example Fiddle

CSS:

#specials:hover {
  // existing styles

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

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