asked on

CSS to Hide to underline a span without javascript on mouse move

You know you can do a:hover somewhere or other in the depths of css, well I want to do a similar thing with a span so that when the mouse moves over it it changes its appearance with underline.

Is there any way of making a span change its appearance using only CSS ?

<span class="nicespan">Hello World</span>

in the .css file

nicespan{height:15; ????????? }

(For bandwidth reasons this needs to be done without javascript. I can do it with js no problem)

thanks

lombardp

Mozilla/Firefo/Opera support :hover also with span, while in MSIE Non-link element hovering is not supported. So (as far as I know) you have to use JavaScript.

plq

ASKER

Hmm I suppose a workaround would be to change all the spans to "a" 's . I think an <a> is so similar to a span it probably won't matter

How could I code :hover in the .css file:

.nicespan{height:15; ????????? }

thanks

riyasjef

try this

nicespan{height:15;text-decoration:none}

riyasjef

sorry
nicespan{height:15;text-decoration:underline}

plq

ASKER

Ah yes I knew that bit.

What I don't know is how to use class= with hover

If I just do

nicespan{height:15;text-decoration:underline}

then it will be underlined all the time. I only want it underlined when the mouse is over

plq

ASKER

My bandwidth problem could also be solved via javascript if I could do:

classname.onmouseover = "event.srcElement.style.textDecoration='underline'"
classname.onmouseout = "event.srcElement.style.textDecoration='none'"

I didn't know if there was a way of doing it by class.

What I cant have is javascript on each line because there's thousands of these tags and it takes too long to come down to the browser.

thanks

Darksbane

THen write a function in javascript to do it (haven't tested below code so it might have some errors)

function uline(element){
event.element.style.textDecoration='underline';
}
function nouline(element){
event.element.style.textDecoration='none';
}

then in your span tag you just have to say
<span name="spanX" onmouseover="uline(spanX)" onmouseout="nouline(spanX)"></span>

This would cut down on the amount of text in the tag, however it is still more than a straight CSS would be. Unfortunately as lombardp said though a CSS tag can't do this in IE to anything other than a link.

Now if bandwidth is your problem you might also consider spliting up the things on the page into different pages. For example if you are generating all these tags as a result of a database query you could page the results. This provides more readability to the user, but since I dont' know what your site does this might not be a good solution for you.

Kupi

Try this:

---

<html>

<head>

<title></title>

<style type="text/css">

span.nicespan {
text-decoration: none;
}

span.nicespan:hover {
text-decoration: underline;
}

</style>

</head>

<body>

<span class="nicespan">test</span>

</body>

</html>

---

This won't work for IE, so just change 'span' to 'a'; you should add the href="#" attribute too.

Notice that both SPAN and A are inline elements so you need to add 'display: block;' to be able to set their height... but remember that block elements (like DIV) are displayed as a new line!

---

<html>

<head>

<title></title>

<style type="text/css">

a.nicelink {
display: block;
text-decoration: none;
height: 15px;
}

a.nicelink:hover {
text-decoration: underline;
}

</style>

</head>

<body>

<a class="nicelink" href="#">test</a>

</body>

</html>

---

Kupi

Zvonko

Hover is defined like this:

<html>
<head>
<style>
a.nicespan{
height:15px;
background-color: cornflowerblue;
}

a.nicespan:hover{
height:15px;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#" class="nicespan"> Nice! </a>
</body>
</html>

Zvonko

Sorry Kupi.

Kupi

np Zvonko, you helped me so many times! :)

Zvonko

Anyway I have to go.
See you.

plq

ASKER

<span name="spanX" onmouseover="uline(spanX)" onmouseout="nouline(spanX)"></span>

This in itself causes too much bandwidth.

I'm trying with the <a> idea now...

Zvonko

That cause NO bandwidth: all that is executed on browser client side.

plq

ASKER

I mean the actual bandwidth in the html coming down to the browser. Literally the length of that line makes a huge difference.

Zvonko

If that is your problem, then what about this:

<html>
<head>
<style>
.spanX {
background-color: cornflowerblue;
}
.spanXunder {
background-color: yellow;
}
</style>
<script>
function chgClass(theObj,cName){
theObj.className = cName;
}
function init(){
aObj = document.getElementsByTagName("*");
for(i=0;i<aObj.length;i++){
if(aObj[i].className=="spanX"){
aObj[i].onmouseover=function(){chgClass(this,"spanXunder")}
aObj[i].onmouseout=function(){chgClass(this,"spanX")}
}
}
}
</script>
</head>
<body onLoad="init()">
<span class="spanX">Some Text</span>
<span class="spanX">More Text</span>
</body>
</html>

plq

ASKER

thanks, thats just shifting the problem. On that many spans (thousands) the loop will take an age to run. The whole point is to get the page to the user asap. Let me continue trying the hover idea first.

ASKER CERTIFIED SOLUTION

devic

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

riyasjef

This is my script

<html>
<head>
<style>
      a:hover{text-decoration:none}
</style>
<script>
            function Hover()
            {
                  var sp=document.getElementsByTagName("span");
                  for(i=0;i<sp.length;i++)
                        sp[i].innerHTML="<a href=''>"+sp[i].innerHTML+"</a>"
            }
</script>
</head>
<body onload="Hover()">
<span>Text1</span>
<span>Text2</span>
<span>Text3</span>
</body>
</html>