开发者

help with controlling links within a div

Ok here is my problem, I've got a div with a hover effect on it, it changes colors when the mouse is over the div, in turn the text inverts colors so that it remains readable. Now my problem is that the links themselves don't follow the color schemes and attacking the links on their own outside the div won't work until the mouse hovers directly over the link itself. Can anyone point me in the right direction.

The HTML

<div id="gs_home_blackbar">
<div id="ic_box_1"><span style="LINE-HEIGHT: 24px; FONT-SIZE: 20px"><strong>An Emerging Leader </strong></span><br />
This is where text goes</div>

<div id="ic_box_2"><br /> This is where text goes</div>
</div>

<div id="ic_box_3" class="a"><br /><br /><a hre开发者_如何学运维f="#">This is where my link goes</a></div>
</div>

and here is the CSS that controls this section

#ic_box_3 {
    color:#fff;
    position:absolute;
    background:#000;
    margin:-130px 0px 0 860px;
    padding:27px 10px 10px 10px;
    text-align:left;
    width:230px;
    height:93px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#fff;
    border-left:dotted 1px #fff;
    }
    #ic_box_3:hover {
    position:absolute;
    background:#fff;
    margin:-130px 0px 0 860px;
    padding:27px 10px 10px 10px;
    text-align:left;
    width:230px;
    height:93px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#000;
    border-left:dotted 1px #000;
    }


Use a selector like this:

#ic_box_3:hover a {
  /* settings for anchors inside a hovered div */
}

Then if you need the situation where both are hovered, use this one:

#ic_box_3:hover a:hover {
  /* etc */
}


It seems like you are trying to make a link look like a button with a hover over effect. You don't have put it in a div and style the div. You can just style the anchor tag itself. Basically apply all those styles that you gave to the div to the anchor itself and tweak as needed.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜