Solved

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

Posted on 2004-09-24
19
457 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now