Power By 专否社区

hyperlink button

Go To StackoverFlow.com

0

I am trying to format a reply button:

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

The background color changes. The only thing that is wrong is that it shows the hyperlink color with the underline(which is something i don't want it to have). also, the color of the text should change to white on hover over...

2012-04-04 20:17
by droidus
Remember the phrase 'LoVe HAte', your links should be styled in the order: a:link, a:visited, a:hover, a:active - David Thomas 2012-04-04 20:20
@DavidThomas whats up with all of the other letters in the phrase. I would find it hard to remember which letters are capital and which are not - Danny 2012-04-04 20:22
Well, I just find it an easier mnemonic than 'LVHA', and since that's how Eric Meyer phrased it the first time I came across the notion, that's the one I remember. It does, of course, omit the a:focus state, too - David Thomas 2012-04-04 20:23
haha interesting! will have to try to remember that... at the moment, i have no other way! : - droidus 2012-04-04 20:26

0

Add a infront of the class

a.replyBtn:hover
2012-04-04 20:19
by David Nguyen

0

CSS works by order of specificity of the selectors used, and then, if two selectors are equally specific, in order of which came last. Reorder your CSS to:

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

I'll point out that you seem to be styling the .replyBtn elements with a default and then over-riding those defaults in your .replyBtn:link styles. I realise you may have other element-types with the same class-name, but you should define the a/link-specific styles in the .replyBtn:link, so it forms the defaults for all of those links:

.replyBtn:link {
    text-decoration: none;
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

/* all the other stuff... */

Edited in response to the comment left in the comments, from the OP:

try this: jsfiddle.net/CTxQs.

Well, given that your HTML mark-up is:

<div class="replyBtn"><a href="#btn_comment">Reply</a></div>​

Your CSS is wrong. This selector:

.replyBtn:link {
}

Selects an element of class-name replyBtn that is a link; this is all well and good and would work, if your a element had the class of .replyBtn. But it does not; the a element is a child element of the .replyBtn div element. Amend your selectors to the following:

.replyBtn { /* selects the div */
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}

.replyBtn a:link { /* selects the a that's a child of the div */
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn a:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}​

JS Fiddle demo.

Further reading, from Eric Meyer:

2012-04-04 20:22
by David Thomas
doesn't help : - droidus 2012-04-04 20:26
so you're saying that ".element:link" gives a default to all elements - droidus 2012-04-04 20:29
It really should; so...I suspect something else is happening to interfere. Any chance you could post a JS Fiddle demo to reproduce/demonstrate your problem? SSCCE, we only need to see the relevant parts required to demonstrate the problem. @droidus: no, I'm saying that .element:link gives a default to all links with the class-name of element. Unless those styles are overridden elsewhere (by !important, or by a more specific selector) - David Thomas 2012-04-04 20:30
try this: http://jsfiddle.net/CTxQs - droidus 2012-04-04 20:35
@droidus Try styling the a and not just the div http://jsfiddle.net/CTxQs/8/ Though I really know little about html and css it looked to work for me - Danny 2012-04-04 20:42
alright! how do I remove the underline initially - droidus 2012-04-04 20:45
Look at the edited answer, the CSS following the hr is what you need. Follow through and check out the JS Fiddle demo, too - David Thomas 2012-04-04 20:47
that button doesn't do anything on hover over. it's also the wrong color initially - droidus 2012-04-04 21:24

0

I successfully applied my required behavior as 

a:link.replyBtn, a:visited.replyBtn, 
a:active.replyBtn, a:hover.replyBtn {...}

On my page, all links are shown as expected i.e. with respect to their css classes. It is working on Chrome but not IE, still working on it... Hope this would help

2012-04-05 06:00
by bjan
Ads