Solved

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

Posted on 2004-09-24
19
465 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

728 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