mouseover bei links in tabelle

Skyhead · 20. November 2010

Hi Leute,

ich habe folgendes Problem. Und zwar habe ich eine 2 Spaltige Tabelle mit nur einer Zeile. in der linken Spalte ist eine Liste mit Links. Ich würde jetzt gern bei einem Mouseover eine Links eine kleine Beschreibung in der rechten Spalte haben.

Ist dies möglich? Wenn ja wie?

Mfg Skyhead

tombe · 20. November 2010

Das geht bestimmt noch viel besser aber auf die Schnelle:

HTML:

<script type="text/javascript" language="JavaScript">
<!--

function anzeigen(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

function ausblenden (a) {
  var e=document.getElementById(a);
  if(!e)return true;
  e.style.display="none"
  return true;
}


//-->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="250px">
    <tr valign="top">
        <td width="50%">
            <a href="link1" onmouseover="return anzeigen('id1')" onmouseout="return ausblenden('id1')">Link 1</a><br />
            <a href="link2" onmouseover="return anzeigen('id2')" onmouseout="return ausblenden('id2')">Link 2</a><br />
            <a href="link3" onmouseover="return anzeigen('id3')" onmouseout="return ausblenden('id3')">Link 3</a><br />
        </td>
        <td>
            <div id="id1" style="display:none;">Das ist die Beschreibung zum ersten Link</div>
            <div id="id2" style="display:none;">Das ist die Beschreibung zum zweiten Link</div>
            <div id="id3" style="display:none;">Das ist die Beschreibung zum dritten Link</div>
        </td>
    </tr>
</table>

newwarrior · 20. November 2010

Hallo,

also ich habe es etwas kürzer zusammen gefasst:

Code:

<script type="text/javascript" language="JavaScript">
<!--

function layer_on(id){
    if(document.getElementById(id).style.display == 'block')
    {
        document.getElementById(id).style.display = 'none';           
    }
    else
    {
        document.getElementById(id).style.display = 'block';            
    }
}
function layer_off(id){
    document.getElementById(id).style.display = 'none';
}
//-->
</script>

<table>
<tr>
<td><a href="#" onmouseover="layer_on('msg_world')" onmouseout="layer_off('msg_world')">Test</a></td>
<td><div id="msg_world" style='display:none;'">Link1</div></td>
</tr>
</table>

Aber wie man sieht ist es jetzt auch nicht so viel anders.
Man kann es glaube ich mit einem JS Framework sicherlich noch elleganter machen.

Skyhead · 21. November 2010

danke erst einmal, aber ist das ganze auch ohne Javascript machbar?

SpiceLab · 21. November 2010

Wenn du das Markup bzgl. der Links und ihrer "Mouseover-Boxen" umstellst, damit sie nicht durch zwei <td>-Elemente voneinander getrennt sind, ist dein Vorhaben mit CSS und der :hover-Pseudoklasse möglich.

Für dein Vorhaben kommen in diesem grundsätzlichen Demo-Dokument, das keine Tabelle und <a>-Elemente enthält, sondern auf einer unsortierten Liste <ul> und <div>-Elementen basiert, die drei Beispiele unter "Teil 2: CSS-Popup" zum Tragen:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>CSS :hover-Selectors</title>

<style type="text/css">
/* <![CDATA[ */
/* Allg. CSS-Einstellungen */
/* .wrapper */
div.wrapper {
width:600px;
margin:50px auto;
}
div.wrapper * {
margin:0;
}
div.wrapper ul {
margin:0;
padding:0;
}
div.wrapper li {
list-style:none;
margin-top:20px;
font-size:0.9em;
}
div.wrapper li p {
margin:10px;
}
div.wrapper h2 {
font-size:1.8em;
font-weight:bold;
border-bottom:1px solid #b5bfca;
color:#b5bfca;
padding:0;
margin:0;
}
div.wrapper h2 span {
position:relative;
top:-6px;
padding:3px 10px;
border-bottom:3px solid #b5bfca;
}
div.wrapper h3 {
font-size:1.6em;
font-weight:bold;
border-bottom:1px solid #b5bfca;
color:#b5bfca;
padding:0;
margin:0;
}
div.wrapper h3 span {
position:relative;
top:-6px;
padding:3px 10px;
border-bottom:3px solid #b5bfca;
}
div.wrapper div {
margin-top:10px;
border:1px solid #cfcfcf;
}


/* .clearfix */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
/* ENDE Allg. CSS-Einstellungen */


/* TEIL 1 - :HOVER-EFFEKT */
div.parentBox {
padding:5px;
background:#fdfdfd;
color:#555;
}

/* Nachfahren-Selektor */
div.parentBox div#descendantBox_1 {
padding:5px;
background:#f3f3f3;
color:#2f2f2f;
}
div.parentBox:hover div#descendantBox_1 {
background:#3968a6;
color:#fff;
}
/* ENDE Nachfahren-Selektor */


/* Kind-Selektor */
div.parentBox > div#childBox_1 {
padding:5px;
background:#f3f3f3;
color:#2f2f2f;
}
div.parentBox:hover > div#childBox_1 {
background:#3968a6;
color:#fff;
}
/* ENDE Kind-Selektor */


/* Nachbar-Selektor */
div#adjacentBox_1 {
float:left;
width:285px;
padding:5px;
background:#fdfdfd;
color:#555;
}
div#siblingBox_1 {
float:left;
width:285px;
margin-left:5px;
padding:5px;
background:#f3f3f3;
color:#2f2f2f;
}
div#adjacentBox_1:hover + div#siblingBox_1 {
background:#3968a6;
color:#fff;
}
/* ENDE Nachbar-Selektor */
/* ENDE TEIL 1 - :HOVER-EFFEKT */


/* TEIL 2 - CSS-POPUP */
div.parentBox {
position:relative;
}

/* Nachfahren-Selektor */
div.parentBox div#descendantBox_2 {
visibility:hidden;
display:none;
}
div.parentBox:hover div#descendantBox_2 {
visibility:visible;
display:block;
position:absolute;
top:-5px;
right:5px;
background:#3968a6;
color:#fff;
font-weight:bold;
width:150px;
line-height:75px;
text-align:center;
}
/* ENDE Nachfahren-Selektor */


/* Kind-Selektor */
div.parentBox > div#childBox_2 {
visibility:hidden;
display:none;
}
div.parentBox:hover > div#childBox_2 {
visibility:visible;
display:block;
position:absolute;
top:-5px;
right:5px;
background:#3968a6;
color:#fff;
font-weight:bold;
width:150px;
line-height:75px;
text-align:center;
}
/* ENDE Kind-Selektor */


/* Nachbar-Selektor */
div#adjacentBox_2 {
float:left;
width:285px;
padding:5px;
background:#fdfdfd;
color:#555;
}
div#siblingBox_2 {
visibility:hidden;
display:none;
}
div#adjacentBox_2:hover + div#siblingBox_2 {
visibility:visible;
display:block;
float:left;
width:285px;
margin-left:5px;
padding:5px;
background:#3968a6;
color:#fff;
}
/* ENDE Nachbar-Selektor */
/* ENDE TEIL 2 - CSS-POPUP */
/* ]]> */
</style>

</head>
<body>

<div class="wrapper">
     <ul class="clearfix">
         <li><h2><span>Teil 1: :hover-Effekt</span></h2>
              <ul>
                  <li><h3><span>Nachfahrenelement</span></h3>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div id="descendantBox_1">descendantBox_1</div>
                      </div>
                  </li>
                  <li><h3><span>Kindelement</span></h3>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div id="childBox_1">childBox_1</div>
                      </div>
                  </li>
                  <li><h3><span>Nachbarelement</span></h3>
                      <div id="adjacentBox_1">
                           <p>adjacentBox_1</p>
                           <p>adjacentBox_1</p>
                      </div>
                      <div id="siblingBox_1">
                           <p>siblingBox_1</p>
                           <p>siblingBox_1</p>
                      </div>
                  </li>
              </ul>
         </li>
     </ul>
     <ul class="clearfix">
         <li><h2><span>Teil 2: CSS-Popup</span></h2>
              <ul>
                  <li><h3><span>Nachfahrenelement</span></h3>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div id="descendantBox_2">descendantBox_2</div>
                      </div>
                  </li>
                  <li><h3><span>Kindelement</span></h3>
                      <div class="parentBox">
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <p>parentBox</p>
                           <div id="childBox_2">childBox_2</div>
                      </div>
                  </li>
                  <li><h3><span>Nachbarelement</span></h3>
                      <div id="adjacentBox_2">
                           <p>adjacentBox_2</p>
                           <p>adjacentBox_2</p>
                      </div>
                      <div id="siblingBox_2">
                           <p>siblingBox_2</p>
                           <p>siblingBox_2</p>
                      </div>
                  </li>
              </ul>
         </li>
     </ul>
</div>

</body>
</html>

SpiceLab · 21. November 2010

Auf das <a>-Element projeziert, lautet der modifizierte (und abgespeckte) Code dann folgendermaßen:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>CSS :hover-Selectors</title>

<style type="text/css">
/* <![CDATA[ */
/* CSS-POPUP */
a.parentBox {
display:block;
position:relative;
width:250px;
line-height:15px;
}

/* Nachfahren-Selektor */
a.parentBox span.descendantBox {
visibility:hidden;
display:none;
}
a.parentBox:hover span.descendantBox {
visibility:visible;
display:block;
position:absolute;
top:0;
right:0;
width:125px;
line-height:15px;
background:#3968a6;
color:#fff;
}
/* ENDE Nachfahren-Selektor */


/* Kind-Selektor */
a.parentBox > span.childBox {
visibility:hidden;
display:none;
}
a.parentBox:hover > span.childBox {
visibility:visible;
display:block;
position:absolute;
top:0;
right:0;
width:125px;
line-height:15px;
background:#3968a6;
color:#fff;
}
/* ENDE Kind-Selektor */


/* Nachbar-Selektor */
a.adjacentBox {
position:relative;
float:left;
width:125px;
}
div.siblingBox {
visibility:hidden;
display:none;
}
a.adjacentBox:hover + div.siblingBox {
visibility:visible;
display:block;
float:left;
width:125px;
background:#3968a6;
color:#fff;
}
/* ENDE Nachbar-Selektor */
/* ENDE  CSS-POPUP */
/* ]]> */
</style>

</head>
<body>

<div class="wrapper">
     <ul class="clearfix">
         <li><h2><span>CSS-Popup</span></h2>
              <ul>
                  <li><h3><span>Nachfahrenelement</span></h3>
                      <a class="parentBox" href="#">parent
                           <span class="descendantBox">descendant</span>
                      </a>
                  </li>
                  <li><h3><span>Kindelement</span></h3>
                      <a class="parentBox" href="#">parent
                           <span class="childBox">child</span>
                      </a>
                  </li>
                  <li><h3><span>Nachbarelement</span></h3>
                      <a class="adjacentBox" href="#">adjacent</a>
                      <div class="siblingBox">sibling</div>
                  </li>
              </ul>
         </li>
     </ul>
</div>

</body>
</html>

mouseover bei links in tabelle

Skyhead

Mitglied

tombe

Erfahrenes Mitglied

newwarrior

Erfahrenes Mitglied

Skyhead

Mitglied

SpiceLab

ZENmechanic

SpiceLab

ZENmechanic

Neue Beiträge