Solved

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

Posted on 2004-09-24
19
460 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:plq
  • 6
  • 5
  • 3
  • +4
19 Comments
 
LVL 9

Expert Comment

by:lombardp
ID: 12141495
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
 
LVL 8

Author Comment

by:plq
ID: 12141526
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
 
LVL 9

Expert Comment

by:riyasjef
ID: 12141657
try this

nicespan{height:15;text-decoration:none}
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 9

Expert Comment

by:riyasjef
ID: 12141666
sorry
nicespan{height:15;text-decoration:underline}

0
 
LVL 8

Author Comment

by:plq
ID: 12141756
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
 
LVL 8

Author Comment

by:plq
ID: 12141790
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
 
LVL 2

Expert Comment

by:Darksbane
ID: 12142775
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
 
LVL 3

Expert Comment

by:Kupi
ID: 12143115
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12143198
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12143204
Sorry Kupi.
0
 
LVL 3

Expert Comment

by:Kupi
ID: 12143225
np Zvonko, you helped me so many times! :)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12143379
Anyway I have to go.
See you.
0
 
LVL 8

Author Comment

by:plq
ID: 12143640
<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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12145165
That cause NO bandwidth: all that is executed on browser client side.
0
 
LVL 8

Author Comment

by:plq
ID: 12145220
I mean the actual bandwidth in the html coming down to the browser. Literally the length of that line makes a huge difference.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12146320
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
 
LVL 8

Author Comment

by:plq
ID: 12146451
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
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 12148652
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
 
LVL 9

Expert Comment

by:riyasjef
ID: 12151744
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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question