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
LVL 8
plqAsked:
Who is Participating?
 
devicConnect With a Mentor Commented:
here my example:
==================================

--------------------- main.html ---------------------
<html>
<head>
<style>
      span{behavior: url('nicespan.htc')}
      .niceOne{text-decoration: underline;color:red;cursor:hand;}
      .niceTwo{text-decoration: none;color:black;}
</style>
</head>
<body>

<span>do you like it?</span><br>
<span>do you like it?</span><br>
<span>do you like it?</span><br>

</body>
</html>


----------------------------  nicespan.htc  -----------------------------
 <component>
 <implements>
  <attach event="onmouseover" onevent="over()" />
  <attach event="onmouseout" onevent="out()" />
 </implements>
 </component>
<script>
function over(){this.className="niceOne"}
function out(){this.className="niceTwo"}
</script>
0
 
lombardpCommented:
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.

0
 
plqAuthor Commented:
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
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
riyasjefCommented:
try this

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

0
 
plqAuthor Commented:
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
0
 
plqAuthor Commented:
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
0
 
DarksbaneCommented:
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.
0
 
KupiCommented:
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
0
 
ZvonkoSystems architectCommented:
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>

0
 
ZvonkoSystems architectCommented:
Sorry Kupi.
0
 
KupiCommented:
np Zvonko, you helped me so many times! :)
0
 
ZvonkoSystems architectCommented:
Anyway I have to go.
See you.
0
 
plqAuthor Commented:
<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...
0
 
ZvonkoSystems architectCommented:
That cause NO bandwidth: all that is executed on browser client side.
0
 
plqAuthor Commented:
I mean the actual bandwidth in the html coming down to the browser. Literally the length of that line makes a huge difference.
0
 
ZvonkoSystems architectCommented:
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>

0
 
plqAuthor Commented:
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.
0
 
riyasjefCommented:
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>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.