webForumDet fria alternativet

Mouseover-effekt på tabellrad

7 svar · 417 visningar · startad av SoulGod

SoulGodMedlem sedan aug. 20051 200 inlägg
#1

Såg på en sida någonstans, en lång lista på information,
och när man höll muspekaren över en "rad" i tabellen,
så blev det en markering över hela raden,
typ en overmouse effekt (jag antar det var bakrunden som ändrades),
iaf var det jättesnyggt , och jag vill ha en sådan på min sida.
Någon som har något tips på hur jag gör detta?

cyprysMedlem sedan dec. 20003 563 inlägg
#2

https://www.gusk.nu vet jag i alla fall har en sån.

m_soderlundMedlem sedan sep. 20026 425 inlägg
#3

onmouseover och onmouseout-attribut på tabellceller. Alternativt det fungerar med a:hover, ungefär så här:

a: hover { background: #333; width: 150px; height: 118%; }

eller dyl.

echoSweMedlem sedan nov. 20041 189 inlägg
#4

soderlund - han frågar efter en rad, inte en cell...
du kan skriva tr:hover { background:red; }

så lyser den upp i bra browsers. För att få det att funka med IE så får du använda javascript. loopa igenom tabellen och sätta onhover på alla tr-element så löser det sig.

JaktJanneMedlem sedan feb. 20001 507 inlägg
#5

Nåt sånt här kanske?

<tr onmouseover="this.style.background='#ffff99'" onmouseout="this.style.background='#ffffff'">
zcorpanMedlem sedan dec. 20042 245 inlägg
#6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>tr:hover</title>
  <style type="text/css">
   tr:hover, tr.hover { background-color:lime; color:black; }
  </style>
  <!--[if IE]>
   <script type="text/javascript" defer="defer">
    var elms = document.getElementsByTagName("tr");
    for (var i = 0, len = elms.length; i < len; ++i) {
      elm = elms[i];
      elm.onmouseover = function() {
        this.className = "hover";
      }
      elm.onmouseout = function() {
        this.className = null;
      }
    }
   </script>
  <![endif]-->
 </head>
 <body>
  <table>
   <tbody>
    <tr>
     <td>foo</td>
     <td>bar</td>
     <td>baz</td>
    </tr>
    <tr>
     <td>foo</td>
     <td>bar</td>
     <td>baz</td>
    </tr>
    <tr>
     <td>foo</td>
     <td>bar</td>
     <td>baz</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>
echoSweMedlem sedan nov. 20041 189 inlägg
#7

Glöm inte dina <![CDATA[ zcorpan

<script ...>
<![CDATA[
//kod
]]></script>
zcorpanMedlem sedan dec. 20042 245 inlägg
#8

echoSwe skrev:

Glöm inte dina <![CDATA[ zcorpan

<script ...>
<![CDATA[
//kod
]]></script>

SCRIPT är redan CDATA i HTML4. Använder du "<![CDATA[" så kommer den strängen att skickas vidare till javascript-motorn, varpå du får ett felmeddelande...

136 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)