Having only a little knowledge on these subjects, I have found the following code on the Internet I thought I could adapt to my needs:
Code:
#example1 .hover{display:none;}
#example1 .nohower{display:block;}
#example1:hover .hover{display:block;}
#example1:hover .nohower{display:none;}
#example2:hover span:after{content:attr(data-hover);}
#example2:hover span{width:1px;margin-left: -0.5em;}
.hoverer {border:1px solid black;overflow:hidden;}
<table>
<thead>
<tr><th class="hoverer">CSS2: hiding</th><th class="hoverer">CSS3: content</th></tr>
</thead>
<tbody>
<tr><td id="example1" class="hoverer"><span class="nohower">1</span><span class="hover">50</span></td><td id="example2" class="hoverer"><span data-hover="50">1</span></td></tr>
</tbody></table>
It does exactly what it is supposed to do which is to replace value "1" with value "50" when "1" is hovered. I was hoping to adapt the code below so that the value "Klik hier vir" becomes "Klik hier vir....."
This works but the w3c validator does not like it, it gives an error:
Quote:
|
there is no attribute "DATA-HOVER"....... this is usually fixed by using CSS to achieve the desired effect instead
|
It seems the cause is a mixture of HTML4 and HTML5. I also had to make a slight change because when testing the original code, one value replaces the other but when testing my code they are concatenated (which suits me fine). I have tried various "DOCTYPE" all giving the same result.
My questions are:
1) Is it safe to ignore the error - will most browsers behave like Epiphany?
2) What code should I change with CSS to fix the problem and how?
Thank you for your help.
PS: here is my full test:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Language Selection.</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel=stylesheet type="text/css" href="css.css"><style type="text/css">a:link {color: hotpink;}a:visited{color: ;}a:hover{color: black;}a:active {color: red;}td {white-space:nowrap; color: #000000;}table{margin: auto;}h3{text-align: center; color: #FFFF00;}td {white-space:nowrap; color: #000000;}table{margin: auto;}h3{text-align: center; color: #FFFF00;}#example2:hover span:after{content:attr(data-hover);}#example2:hover span{width:1px;margin-left: -0.5em;}.hoverer {border:1px solid black;overflow:hidden;}
</style></head><body>
<table>
<!--Afrikaans --><tr><td id="example2" class="hoverer" lang="af"><a href="http://127.0.0.1/languages/af/show_splash.htm"><span data-hover="...">Klik hier vir</span></a></td><td lang="af">Afrikaans</td><td></td></tr>
</table></body></html>
