Getting css with jquery and Internet Explorer

Question

I'm trying to get some css with jquery in internet explorer.

The css is set in a external file and looks like this:

#something a {
    text-decoration: none;
    /* since I dont want underline when not hover */
}

#something a:hover {
    text-decoration: underline;
}

And I want to get if underline is set or not.

This works in firefox and webkit but not IE:

$('a').hover(function() {
    console.log($(this).css('textDecoration'));
    /* this return underline in FF and Webkit but not in IE */
});

Does anyone know how to get it to work in IE?

@Patrik Hi friend, your code return the correct property i checked in IE7+. which version of IE you are using?Here one think to note that <a> tag by default possess underline. so if you dont give any text-decoration to it using css, moreover the code will return underline — thecodeparadox
– thecodeparadox, Commented May 31, 2011 at 11:21
@abdullah.abcoder Hm... are you sure you tried with :hover? try set #something a { text-decoration: none; } and #something a:hover { text-decoration: underline; } || I will update my example code a bit. — Patrik
– Patrik, Commented May 31, 2011 at 11:29
You question is illogical. Inside the hover event the link will always be underlined, so it's no point in testing if it is. Is your example correct? Do you actually need to know if the link is underlined, or if it's only being hovered? — RoToRa
– RoToRa, Commented May 31, 2011 at 11:37
@RoToRa I want to know if the element i'm hovering is supposed to have an underline or not. — Patrik
– Patrik, Commented May 31, 2011 at 11:42
Ok, the goal of my questions was to see if there were any alternatives to detecting the underline, but now I know your goal, see there doesn't seem to be. Let me think about it for a bit... — RoToRa
– RoToRa, Commented May 31, 2011 at 12:12

RoToRa · Accepted Answer · 2011-05-31 13:00:43Z

1

Adding a setTimeout makes it work:

$("a").hover(function() {
    var x = $(this);
    setTimeout(function() {
      console.log(x.css("text-decoration"));
    }, 1);
});

http://jsfiddle.net/ZGKqC/2/

answered May 31, 2011 at 13:00

RoToRa

38.5k12 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrik Over a year ago

Thanks it's working but the hover function is failing. Mouse over works but mouse out doesnt work (same code works in ff/webkit) jsfiddle.net/SeaNC

Anish · Accepted Answer · 2011-05-31 11:15:06Z

0

try like this...

$('a').hover(function() {
    $(this).css('text-decoration','underline');
});

answered May 31, 2011 at 11:15

Anish

2,9371 gold badge24 silver badges45 bronze badges

2 Comments

MarioRicalde Over a year ago

Why the negative vote? +1 for the same reason the -1 was originally placed.

RoToRa Over a year ago

-1 was for not being even close. The OP doesn't want to set underline, he want's to know if it's set.

thecodeparadox · Accepted Answer · 2011-05-31 11:37:53Z

0

Try this Bro:

$('a').css('textDecoration', 'none'); //initially set no underline 
$('a').mouseenter(function() {
    $(this).css('textDecoration', 'underline'); //set underline in hover in
}).mouseleave(function() {
    $(this).css('textDecoration', 'none'); // set no underline in hover out
});

answered May 31, 2011 at 11:37

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

4 Comments

thecodeparadox Over a year ago

@Patrik this code independent form css property i.e. if underline is set or not to a

RoToRa Over a year ago

-1 for not being even close. The OP doesn't want to set underline, he want's to know if it's set.

Patrik Over a year ago

The problem is that I don't know if the link should have underline. If i write a:hover { text-decoration: underline } I want the js to check the css and say "this link should have underline" and if I write text-decoration: none; it should say "This link should not be underlined".

thecodeparadox Over a year ago

@RoToRa it was my lack to understand OP's view.In future try to avoid this error.Thanks again.

Salman Riaz · Accepted Answer · 2011-05-31 11:43:46Z

0

Try following

$('a').hover(function() {
     console.log($(this).css('text-decoration'));         
});

answered May 31, 2011 at 11:43

Salman Riaz

831 silver badge6 bronze badges

Collectives™ on Stack Overflow

Getting css with jquery and Internet Explorer

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related