Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unable to apply <style> to <div> tags

    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>

  • #2
    New Coder
    Join Date
    Dec 2005
    Location
    Dallas, TX
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    .classname:hover {
        color: #000000;
    }

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

    PHP and MySQL pro, and always willing to help.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

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

  • #4
    New Coder
    Join Date
    Dec 2005
    Location
    Dallas, TX
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by shaoen01
    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.

    Code:
    .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.
    Owner - Osiris Incorporated

    PHP and MySQL pro, and always willing to help.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for your reply. I used this code because i wish to apply to each individual:
    Code:
    .classname:hover{
        border: 1px solid red;
    }
    And this is how i applied it:
    Code:
    <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

  • #6
    New Coder
    Join Date
    Dec 2005
    Location
    Dallas, TX
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Owner - Osiris Incorporated

    PHP and MySQL pro, and always willing to help.

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #8
    New Coder
    Join Date
    Dec 2005
    Location
    Dallas, TX
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool deal. Just out of mild curiosity, what was it?
    Owner - Osiris Incorporated

    PHP and MySQL pro, and always willing to help.

  • #9
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    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:
    Code:
    <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:

    Code:
    <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.

  • #10
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 that will automatically do this for you if you have already created a CSS with ":hover"s
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #11
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by shaoen01
    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!
    Last edited by Pyth007; 12-20-2005 at 02:45 PM.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #13
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This has the hover suckerfish script.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #15
    New Coder
    Join Date
    Aug 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the link, i will go and check it out!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •