...

View Full Version : need help w/CSS and :hover behavior



Leeoniya
12-31-2007, 09:57 AM
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

Leeoniya
12-31-2007, 10:16 AM
solved.

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


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

Arbitrator
12-31-2007, 10:34 AM
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.


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.


solved.

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


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.

Leeoniya
12-31-2007, 01:23 PM
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

Arbitrator
12-31-2007, 01:39 PM
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.


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.


li span { display: none; }
li::before { content: "\2261"; }
li:hover::before { content: "\2212"; }

Ö

<li><span>switch to X mode</span></li>

Leeoniya
12-31-2007, 01:50 PM
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

Apostropartheid
12-31-2007, 01:57 PM
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.

Actinia
01-06-2008, 04:59 PM
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.

<!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

Arbitrator
01-07-2008, 11:18 AM
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.


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.


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.


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.)

Actinia
01-07-2008, 12:05 PM
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

Arbitrator
01-07-2008, 12:27 PM
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.


The spurious <ul> was left over from a previous attempt using a list.Ah, okay. So it was a typographical error.


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/).

Actinia
01-08-2008, 02:34 PM
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.

<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum