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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts

    need help w/CSS and :hover behavior

    I have an <li> element containing only an "&equiv;".

    I would like to change this to a minus sign on :hover without using javascript or background images.

    the closest i have gotten is CSS's "generated content" using :before and :after, and these work well, except they insert rather than replace.

    any ideas?

    thanks,
    Leon

  • #2
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    solved.

    until css3 is fully supported where :before and :after are not required, so replacement happens....i just generate both.

    Code:
    li.selectFlip:before {
    	content: "\2261";
    }
    li.selectFlip:hover:before {
    	content: "\2212";
    }

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Leeoniya View Post
    I have an <li> element containing only an "&equiv;".

    I would like to change this to a minus sign on :hover without using javascript or background images.

    [Ö]

    any ideas?
    Assuming that ďonly an "&equiv;"Ē doesnít preclude the addition of new elements, you could use the method shown below.

    Code:
    li:hover span { display: none; }
    li:hover::before { content: "\2212"; }
    
    Ö
    
    <li><span>&equiv;</span></li>
    Of course, this assumes that the replacement character is not content that belongs in the HTML document instead of a CSS style sheet. If it is, then you should be using scripting to replace the character.

    Quote Originally Posted by Leeoniya View Post
    solved.

    until css3 is fully supported where :before and :after are not required, so replacement happens....i just generate both.

    Code:
    li.selectFlip:before {
    	content: "\2261";
    }
    li.selectFlip:hover:before {
    	content: "\2212";
    }
    One does wonder whether the &equiv; character is content or presentation. If itís the former, your solution is semantically incorrect and, if itís the latter, your original code was semantically incorrect.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    well the purpose of it is this:

    the list is styled as set of buttons, this button in particular is both a "select mode" indicator that shows the user whether s/he is in single or multi-select mode. on hover i want to swap the equiv symbol with the minus symbol to indicate that the button performs a mode switch. once it is pressed, and a script changes the mode, the button will perform the inverse swapping on hover.

    i just figured an equiv symbol looks like 3 selected table rows, and a minus sign looks like 1 selected row.

    Leon

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Leeoniya View Post
    well the purpose of it is this:

    the list is styled as set of buttons, this button in particular is both a "select mode" indicator that shows the user whether s/he is in single or multi-select mode. on hover i want to swap the equiv symbol with the minus symbol to indicate that the button preforms a mode switch. once it is pressed, and a script changes the mode, the button will perform the inverse swapping on hover.
    HmmÖ Thatís kind of a hard one. Iíd guess that youíd need the mentioned CSS3 version of the content property to get things semantically correct while maintaining this particular effect, like in the below example.

    Code:
    li { content: "\2261"; }
    li:hover { content: "\2212"; }
    
    Ö
    
    <li>switch to X mode</li>
    Alternatively (after having thought about it a bit more), the characters and text shown above could be produced via an image or object element with fallback content. A modification (shown below) of my previous example could also work.

    Code:
    li span { display: none; }
    li::before { content: "\2261"; }
    li:hover::before { content: "\2212"; }
    
    Ö
    
    <li><span>switch to X mode</span></li>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    if you look at post 2, i'm doing this already, exactly for the reason mentioned. the only difference is that i have no <span> because that text is in a "title" attribute, so it comes up in a tooltip. this seems to work in both opera 9.5 and FF3. the css3 implementation is smooth, and that conversion will be all of 3 seconds...removing the :before(s). but that'll have to wait for better css3 support.

    thanks for your help
    Last edited by Leeoniya; 12-31-2007 at 01:53 PM.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    CSS3 support won't be around for a long time. Even when IE does get a foothold, you're still gonna have to wait till IE7/IE8/whatever has a 0.1&#37; marketshare, and we're still in the mentality that giving a quick thought to IE5.5 won't hurt much (which it mostly doesn't if you throw IE6 into quirks.) In any case, stick to CSS2[.1] for a while yet.

  • #8
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I found a partial solution to this problem. It does require that the element to be swapped is a block, if you try and include it in a list item, the block is displaced. However, you may come up with something you want based on this.

    The method involves fixing the width of the block to just show one character, with overflow hidden. The block contains all the characters that might show. On hover, the (relative) position is changed to show another character. I have given the active block a background to help localise it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Hover problem</title>
    <style>
    a {text-decoration: none; }
    div.outer {position: relative; margin-left: 10em; width: 0.5em; 
    					 overflow: hidden;
    					 background-color: #f9f; }
    a:link  div.inner {position: relative; left: 0em; }
    a:hover div.inner {position: relative; left: -0.75em; }
    </style>
    </head>
    <body>
    <ul>
    <div class="outer"><a href="#"><div class="inner">&equiv;&nbsp;-</div></a></div>
    </body>
    </html>
    I have given the sizes in ems to accommodate different font sizes.

    John

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Leeoniya View Post
    if you look at post 2, i'm doing this already, exactly for the reason mentioned. the only difference is that i have no <span> because that text is in a "title" attribute, so it comes up in a tooltip. this seems to work in both opera 9.5 and FF3.
    I didnít have access to your HTML, so I wasnít able to tell how redundant it was. The primary point was having readable fallback content; a title attribute requires that the user hover to see the command and, thus, the presence of its content isnít quite so obvious to a user.

    Quote Originally Posted by CyanLight View Post
    CSS3 support won't be around for a long time. Even when IE does get a foothold, you're still gonna have to wait till IE7/IE8/whatever has a 0.1% marketshare, and we're still in the mentality that giving a quick thought to IE5.5 won't hurt much (which it mostly doesn't if you throw IE6 into quirks.) In any case, stick to CSS2[.1] for a while yet.
    Support for various modules of CSS3 is building. Internet Explorer even supports small parts of CSS3. Thereís no need to limit oneself to an arbitrary number. Itís also worth pointing out that Leeoniya is using the before and after pseudo‐elements, both of which are part of CSS2/2.1 and neither of which are supported by Internet Explorer.

    Quote Originally Posted by JohnRostron View Post
    I found a partial solution to this problem.
    Your ďpartial solutionĒ exhibits numerous problems though.

    For one, it requires ECMAScript/JavaScript to cancel the default action of href="#", the use of which Leeoniya wanted to avoid, based upon his/her original request.

    For two, it uses solely the text &equiv;&nbsp;- as the toggle, which is semantically meaningless.

    For three, there are several technical errors:
    • A system identifier (URI) should be used in the document type declaration. Your current declaration is likely to invoke quirks mode and the problems thereof. (With regard to this being a ďtechnicalĒ error, Iím still unsure as to whether or not the spec. requires the URI.)
    • The required type attribute of the style element is missing.
    • div elements canít be children of ul or a elements. Trying to use div elements in place of li elements defeats the purpose of using an unordered list in the first place.
    • The end tag for the ul element is missing.
    • # is an invalid URI.

    Quote Originally Posted by JohnRostron View Post
    It does require that the element to be swapped is a block, if you try and include it in a list item, the block is displaced.
    Perhaps you should have tried using display: block to override display: list-item instead of replacing li elements with div elements. I donít see how it would make a difference though since a list item marker isnít supposed to take up space unless the list-style-position property has the value inside; perhaps this is an effect of quirks mode. (Note I didnít actually test your code due to the previously mentioned problems with it, hence why my statements arenít definitive.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    My 'partial solution' was only intended as a possible technique to explore rather than a definitive solution. I included an <a> tag simply because not all browsers will respond to the :hover over a non-anchor tag. The spurious <ul> was left over from a previous attempt using a list.

    I put this together quickly using my barebones laptop with HTMLKit which generated the DOCTYPE. The browser does not have the validity checking of my main PC.

    John

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by JohnRostron View Post
    I included an <a> tag simply because not all browsers will respond to the :hover over a non-anchor tag.
    Yes, Iím aware that it was included for Internet Explorer versions prior to 7. I was simply pointing out that this added the requirement of scripting, be it because of the need to cancel the default action or add the hover effect via event listeners.

    Quote Originally Posted by JohnRostron View Post
    The spurious <ul> was left over from a previous attempt using a list.
    Ah, okay. So it was a typographical error.

    Quote Originally Posted by JohnRostron View Post
    I put this together quickly using my barebones laptop with HTMLKit which generated the DOCTYPE. The browser does not have the validity checking of my main PC.
    I see your point. You might consider creating offline templates with the most basic HTML ready, including a complete document type declaration, instead of using a generator, since they tend to spit out poor and incorrect code. This is what I do to save time anyway. Thereís also no need for native validity‐checking if your laptop is Internet‐enabled (http://validator.w3.org/).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I have rejigged this page, incorporting Arbitrator's comments. I have now placed the divs within the <li> element of a list, which do display properly, at least in FF. I did try to give the <li> itself the 'outer' class. This resulted in the bullet disappearing, though the hover worked OK.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    					"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Hover problem</title>
    <style type="text/CSS">
    a {text-decoration: none; }
    div.outer {position: relative; width: 0.5em; 
    					 overflow: hidden;
    					 background-color: #f9f; }
    a:link  div.inner {position: relative; left: 0em; }
    a:hover div.inner {position: relative; left: -0.75em; }
    </style>
    </head>
    <body>
    <ul>
    <li><div class="outer"><a href="#"><div class="inner">&equiv;&nbsp;-</div></a></div></li>
    </ul>
    </body>
    </html>
    Arbitrator said:
    For two, it uses solely the text &equiv;&nbsp;- as the toggle, which is semantically meaningless.
    Yes, this text is semantically meaningless, but these are the characters that Leeoniya wanted to appear!

    # is an invalid URI.
    I left this in, assuming that Leeoniya would want some kind of link here.
    John
    Last edited by Actinia; 01-08-2008 at 02:45 PM. Reason: slight addition


  •  

    Posting Permissions

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