...

View Full Version : Unable to apply <style> to <div> tags



shaoen01
12-17-2005, 04:56 AM
Hi,

Currently, i am would like to apply a <style> on my div onmouseover but unable to do so. I would like to apply a border account the image when onmouseover. Hopefully, you guys can help me out here. Below is a snippet of my code:

<HTML>
<TABLE id="Table1" style="WIDTH: 56px; HEIGHT: 30px" cellSpacing="1" cellPadding="1" width="56"
border="1">
<TR>
<TD>
<div id="divDisplay" onmouseover="borderit">
<asp:ImageButton id="imgDisplay" runat="server"></asp:ImageButton>
</div>
<div id='more1' style="DISPLAY:block" onmouseover="this.style.color='red'">
<a href="#" id="link1" name="link1" onclick="show('more',true)">More</a>
</div>
<div id='more' style="DISPLAY:none" onmouseover="this.style.color='red'">
<asp:ImageButton id="img2" runat="server"></asp:ImageButton>
<asp:ImageButton id="img3" runat="server"></asp:ImageButton>
<a href="#" id="link2" name="link2" onClick="show('more', false)">Close</a>
</div>
</TD>
</TR>

</TABLE>
</HTML>


Here is my <style> coding in javascript:

<Javascript>
<style type="text/css">

.borderit{
color: red;
}
</style>
</Javascript>

Osiris
12-17-2005, 08:18 AM
First problem I see is that you use the <script> tags to envelop the <style> tags... Not good. It doesn't work. Second, all you have to do to change a CSS property on hover is to do:


.classname:hover {
color: #000000;
}



With .classname of course being the class name, and #000000 of course being whatever color you need.

shaoen01
12-17-2005, 08:26 AM
I wish to use your below style in my <input type="image">. How do i call it? I do not wish to use it in my <div> tags.


.classname:hover {
border: 1px solid red;
}

Osiris
12-17-2005, 08:31 AM
I wish to use your below style in my <input type="image">. How do i call it? I do not wish to use it in my <div> tags.


.classname:hover {
border: 1px solid red;
}

Simply change the ".classname:hover" to "img:hover" (if you want every image on the page to do that) or, change '<input type="image">' to '<input type="image" class="classname">'. CSS is very flexible when it comes to what can be applied to what. :)

shaoen01
12-17-2005, 08:53 AM
Hi,

Thanks for your reply. I used this code because i wish to apply to each individual:

.classname:hover{
border: 1px solid red;
}

And this is how i applied it:

<asp:ImageButton id="img2" runat="server" CssClass="classname"></asp:ImageButton>

However, this does not work. I also tried your "img:hover" and it doesnt work too. What do you think is wrong? Thanks again

Osiris
12-17-2005, 09:07 AM
Oh, are you using this with ASP? It might be different then, as I know NOTHING about ASP, and knowing Microsoft, it probably messes with normal CSS/HTML specs. Sorry, someone else will have to help.

shaoen01
12-17-2005, 09:59 AM
Hi,

Yeah, i am doing this in Asp.net. Dont worry about it, thanks so much for your help. I have found a solution to my problem already. Thanks again! :thumbsup:

Osiris
12-17-2005, 10:19 PM
Cool deal. Just out of mild curiosity, what was it?

shaoen01
12-18-2005, 09:18 AM
Initially, when i created the web controls (image button aka input type=image) in ASP.Net, they do not have the attributes such as onmouseover, onmouseout, etc. Therefore, i thought it was not available for the image button. But even though it did not provide such attributes, when i build my project it does not give me any errors and was able to view the changes in my IE6.

This code is my HTML coding to create a Image button:


<input type="Image" name="imgBtn" id="filename" onclick="Btn_onClick()" src=Images/1.jpg class="removeBorder" onmouseover="this.className='applyBorder' onmouseout="this.className='removeBorder" />


This is style applied to my imagebutton to remove and apply border to my imagebutton:



<style>.applyBorder {
border: blue 0.2cm solid;
}
.removeBorder {
border: gainsboro 0.2cm solid;
}

.hidden{
display: none;
}
</style>


By applying the ".removeBorder" and ".applyBorder" to my onmouseout and onmouseover, i need not use the ".classname:hover", because this way of implementation is quite efficient, at least in my case.

Pyth007
12-19-2005, 02:59 PM
IE will only recognize the pseudo classes (eg ":hover") with <a> link elements. To get the "hover" effect to work in IE for other elements (eg <div>s and <img>s), you have to use onmouseover / onmouseout. Just create a CSS class (as opposed to the ":hover" pseudo-class) and change it by onmouseover="this.className='cssClass1';"....

There is also a "suckerfish" script (http://www.htmldog.com/ptg/archives/000051.php) that will automatically do this for you if you have already created a CSS with ":hover"s

shaoen01
12-19-2005, 05:57 PM
I didnt know ":hover" only works in IE. Well, i dont think it is necessary for me to create a CSS class. But thanks for letting me know more suggestions on how to make it work. At the moment, my coding is working great! Thanks for the link as well! :thumbsup:

Pyth007
12-20-2005, 03:35 PM
I didnt know ":hover" only works in IE.
Either a typo or you misread my comment... The ":hover" pseudo-class will work for most browsers; however, in IE it only works for <a> links -- not for any other type of element. On the other hand, FF, for example, will recognize the pseudo-class for any element. Thus IE is more restrictive when it comes to ":hover".

But I'm glad you got it to work! :)

Oh, and you may want to read thru the code on that link I provided; they basically did the same thing that you did, using onmouseover/out to change the class, but in their function, they used a regular expression function in order to change only the part of the className attribute that contained the "toggling" class... Thus in your code, you may want onmouseover to find "removeBorder" in the className attribute and selectively change it to "applyBorder" using a regular expression function, rather than changing the entire className attribute... The reason for doing this is when you want the object to be a part of several CSS classes: eg className="myStyle1 myStyle2 removeBorder". By saying className="applyBorder", the element will no longer be a part of myStyle1 and myStyle2 classes!

shaoen01
12-21-2005, 05:10 PM
I must have misread what you have written and thanks for clearing things up again. I think you may have forgotten to add the link to your reply. I have clicked all the possible links but did not find anything regarding what you have mentioned about the website.

Pyth007
12-21-2005, 09:20 PM
This has the hover suckerfish script. (http://www.htmldog.com/articles/suckerfish/hover/)

shaoen01
12-22-2005, 07:32 AM
Thanks for the link, i will go and check it out!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum