[jQuery] Re: Question about jQuery + CSS

[Yansky]

Try
jQuery("a").mouseover( function() { $(this).css("fontSize",
"20px"); } );

howard chen wrote:

> hody
>
> 1. How to set the css in each() iteration?
>
> e.g.
>
> jQuery("a").each(function() {
> // change css
>
> // do the rest
> )
>
> I don't want to use jQuery("a").css as it as imply two dom querying
> doing the same thing
>
> 2. How to set the following CSS?
>
> a:hover {
> font-size:20px;
> }
>
>
> Thanks.

[jQuery] Re: Question about jQuery + CSS

[Yansky]

Oh wait, disregard my previous attempt. It doesn't remove the css
onmouseout. Try this instead:

jQuery("a").hover(function(){
   $(this).css("fontSize","20px");
 },function(){
   $(this).css("fontSize", "");
 });

On Apr 18, 2:35 pm, "howard chen" <[EMAIL PROTECTED]> wrote:
> hody
>
> 1. How to set the css in each() iteration?
>
> e.g.
>
> jQuery("a").each(function() {
> // change css
>
> // do the rest
> )
>
> I don't want to use jQuery("a").css as it as imply two dom querying
> doing the same thing
>
> 2. How to set the following CSS?
>
> a:hover {
> font-size:20px;
>
> }
>
> Thanks.

[jQuery] Re: Question about jQuery + CSS

[howard chen]

sorry, a:hover is just an example, what i want is to style pseudo
class, such as a:visited, a:active etc


Try
jQuery("a").mouseover( function() { $(this).css("fontSize",
"20px"); } );

[jQuery] Re: Question about jQuery + CSS

[Yansky]

You could change stylesheets onmouseover.

On Apr 18, 4:28 pm, "howard chen" <[EMAIL PROTECTED]> wrote:
> sorry, a:hover is just an example, what i want is to style pseudo
> class, such as a:visited, a:active etc
>
> >>Try
> >>jQuery("a").mouseover( function() { $(this).css("fontSize",
> >>"20px"); } );

[jQuery] Re: Question about jQuery + CSS

[Klaus Hartl]

howard chen schrieb:


sorry, a:hover is just an example, what i want is to style pseudo
class, such as a:visited, a:active etc


There are no properties in JavaScript that represent these pseudo 
classes, thus it cannot be done.



-- Klaus

[jQuery] Re: Question about jQuery + CSS

[Scott Sauyet]

Klaus Hartl wrote:

howard chen schrieb:


sorry, a:hover is just an example, what i want is to style pseudo
class, such as a:visited, a:active etc


There are no properties in JavaScript that represent these pseudo 
classes, thus it cannot be done.


However, as long as what you want is not too dynamic and you can add CSS 
rules to handle them, you can have


CSS:
a.class1:visited { /* whatever */ }

JS:
$("a").each(function() {
   $(this).addClass("class1");

   // do the rest
)

to achieve the same effect.  I believe there are techniques to modify 
the current stylesheets too, but they are difficult to do correctly 
cross-browser.


Good luck,

 -- Scott

[jQuery] Re: Question about jQuery + CSS

[Brian Cherne]

You can access the stylesheet object using JavaScript. However, each browser
represents CSS rules differently. There is no cross-browser way to
access/manipulate the rules. I *had* to manipulate the stylesheet object in
Safari to avoid the a:hover over swf bug... but even Safari represented the
rules differently between versions (1.3.2 vs. 2.0.4).

It is certainly "death by a thousand cuts" to edit the stylesheet object. I
recommend adding another class and going that route.

Brian.

On 4/18/07, Scott Sauyet <[EMAIL PROTECTED]> wrote:



Klaus Hartl wrote:
> howard chen schrieb:
>>
>> sorry, a:hover is just an example, what i want is to style pseudo
>> class, such as a:visited, a:active etc
>
> There are no properties in JavaScript that represent these pseudo
> classes, thus it cannot be done.

However, as long as what you want is not too dynamic and you can add CSS
rules to handle them, you can have

CSS:
 a.class1:visited { /* whatever */ }

JS:
 $("a").each(function() {
$(this).addClass("class1");

// do the rest
 )

to achieve the same effect.  I believe there are techniques to modify
the current stylesheets too, but they are difficult to do correctly
cross-browser.

Good luck,

  -- Scott

[jQuery] Re: Question about jQuery + CSS

[Jeffrey Kretz]

Koch has a good chart of browser compatibility for stylesheet manipulation:

 

http://www.quirksmode.org/dom/w3c_css.html

 

JK

 

From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Brian 
Cherne
Sent: Wednesday, April 18, 2007 1:14 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Question about jQuery + CSS

 

You can access the stylesheet object using JavaScript. However, each browser 
represents CSS rules differently. There is no cross-browser way to 
access/manipulate the rules. I *had* to manipulate the stylesheet object in 
Safari to avoid the a:hover over swf bug... but even Safari represented the 
rules differently between versions ( 1.3.2 vs. 2.0.4).

It is certainly "death by a thousand cuts" to edit the stylesheet object. I 
recommend adding another class and going that route.

Brian.

On 4/18/07, Scott Sauyet <[EMAIL PROTECTED]> wrote:


Klaus Hartl wrote:
> howard chen schrieb:
>>
>> sorry, a:hover is just an example, what i want is to style pseudo
>> class, such as a:visited, a:active etc
>
> There are no properties in JavaScript that represent these pseudo 
> classes, thus it cannot be done.

However, as long as what you want is not too dynamic and you can add CSS
rules to handle them, you can have

CSS:
 a.class1:visited { /* whatever */ }

JS:
 $("a").each(function() {
$(this).addClass("class1");

// do the rest
 )

to achieve the same effect.  I believe there are techniques to modify
the current stylesheets too, but they are difficult to do correctly 
cross-browser.

Good luck,

  -- Scott