473,320 Members | 1,957 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

accesing to the hover style with javascript

Hi.

I need to access to the hover style of an element with javascript. How
can i do this?

Best regards
Manuel

Mar 16 '07 #1
3 11566
<mf*****@gmail.comwrote:
I need to access to the hover style of an element with javascript. How
can i do this?
u can bothe add a css rule of modify an existing one.

suppose the declared css is :

a.myClass:hover {<the directives}

in that case u want to modify an existing style.

first u'll have to loop over all the styles nodes, using DOM, in order
to find the selector text "a.myClass:hover ", we will call it by a
variable name "selector" and the new rules "newRules" then :

var rgs=new RegExp('\\s*'+selector+"\\s*","g")
var css=document.styleSheets;
for(var k=0;k< css.length;k++){
var rules=document.styleSheets[k].cssRules;
for(var i=0;i<rules.length;i++){
if(rgs.test(rules[i].selectorText)) {
rules[i].style.cssText=newRules;
}
}
}
with, for example :

selector="a.myClass:hover";
newRules="padding:0 15px 0 1em; background:#fcefab;";

or, u might want to change only one property for example :

property="background";
value="blue";

in that case i'll have to split the cssText of the rule corresonding to
the selector like :

var cssTexts=rules[i].style.cssText.split(';');
then loop over the properties to change the "background :

for(var j=0;j<cssTexts.length;j++){
if(rgp.test(cssTexts[j])) cssTexts[j]=property+':'+value;
}

using another Regexp :
var rgp=new RegExp('^\\s*'+property+"\\s*:","g")

then restore the whole cssText by :
rules[i].style.cssText=cssTexts.join(';');

that's all if u want to change a property for a given selector.

It is much more easier to *add* a new rule if the rule corresponding to
the selector doesn't exists :

saying we have :
var aRule='h1, h3 {color:red;background:#666;}';
suppose, worst case, we don't have *any* <style ... /in the document
head then :

var head=document.getElementsByTagName('head')[0];
var style=document.createElement('style');
style.type='text/css';
head.appendChild(style);
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[0].insertRule(aRule,0);

otherwise, simplest case, their is allready some styles nodes in your
document, then :

var stylesLen=document.getElementsByTagName('style').l ength;
var
rulesLen=document.getElementsByTagName('style')[stylesLen-1].cssRules.le
ngth;
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[stylesLen-1].insertRule(aRule,rulesLen);
Mar 16 '07 #2
On 16 mar, 20:02, unbewusst.s...@wortanschahung.com.invalid (Une
Bévue) wrote:
<mfc1...@gmail.comwrote:
I need to access to the hover style of an element with javascript. How
can i do this?

u can bothe add a css rule of modify an existing one.

suppose the declared css is :

a.myClass:hover {<the directives}

in that case u want to modify an existing style.

first u'll have to loop over all the styles nodes, using DOM, in order
to find the selector text "a.myClass:hover ", we will call it by a
variable name "selector" and the new rules "newRules" then :

var rgs=new RegExp('\\s*'+selector+"\\s*","g")
var css=document.styleSheets;
for(var k=0;k< css.length;k++){
var rules=document.styleSheets[k].cssRules;
for(var i=0;i<rules.length;i++){
if(rgs.test(rules[i].selectorText)) {
rules[i].style.cssText=newRules;
}
}
}

with, for example :

selector="a.myClass:hover";
newRules="padding:0 15px 0 1em; background:#fcefab;";

or, u might want to change only one property for example :

property="background";
value="blue";

in that case i'll have to split the cssText of the rule corresonding to
the selector like :

var cssTexts=rules[i].style.cssText.split(';');
then loop over the properties to change the "background :

for(var j=0;j<cssTexts.length;j++){
if(rgp.test(cssTexts[j])) cssTexts[j]=property+':'+value;
}

using another Regexp :
var rgp=new RegExp('^\\s*'+property+"\\s*:","g")

then restore the whole cssText by :
rules[i].style.cssText=cssTexts.join(';');

that's all if u want to change a property for a given selector.

It is much more easier to *add* a new rule if the rule corresponding to
the selector doesn't exists :

saying we have :
var aRule='h1, h3 {color:red;background:#666;}';
suppose, worst case, we don't have *any* <style ... /in the document
head then :

var head=document.getElementsByTagName('head')[0];
var style=document.createElement('style');
style.type='text/css';
head.appendChild(style);
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[0].insertRule(aRule,0);

otherwise, simplest case, their is allready some styles nodes in your
document, then :

var stylesLen=document.getElementsByTagName('style').l ength;
var
rulesLen=document.getElementsByTagName('style')[stylesLen-1].cssRules.le
ngth;
var aRule='h1, h3 {color:red;background:#666;}';
document.styleSheets[stylesLen-1].insertRule(aRule,rulesLen);
oh, thank you very much.

that was what needed

Mar 16 '07 #3
ASM
mf*****@gmail.com a écrit :
Hi.

I need to access to the hover style of an element with javascript. How
can i do this?
Not clear ...
An example ?
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 17 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Cezar | last post by:
Hello. How can simple emulating in IE this class ? ..example:hover{ border: 1px solid #696969; } Greets, Cezar.
1
by: Jon W | last post by:
This is a small table with hover on the table cells. The first cell is setup to switch from div element to input element by use of display:block/none. In IE, onclick the input element is displayed...
2
by: Sugapablo | last post by:
Can anyone help me out with some code to change three table cells (<td>) when one is hovered over? I have a calendar grid where each day is made up of three table cells and I want all three to...
2
by: Elisa | last post by:
I have two images, each with defined CSS hover states. I would like a mouseover on one image to trigger the hover state of the other image. Is this possible using javascript? If so, how? Any...
2
by: skipc | last post by:
I posted a recent message regarding navigating a table using arrow keys. I've got the code for the navigation working. My table contains rows of links (anchors). I can get to a specific link...
7
by: Matt | last post by:
Is there a way to increase the amount of time a hyperlink title displays or show the desired text using javascript? <a title="This is the title text displayed on hover.">Displayed Text</a> ...
4
by: bne | last post by:
Hi, My brain's a bit fried on this one. I'm using the li:hover method to display sub menus at http://dev.hyl.co.uk/guide4life/. All works swimmingly in FF, however IE7 loses the hover (and so...
3
by: noize | last post by:
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results. I have built a drop-down menu using...
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.