myGully.com

myGully.com (https://mygully.com/index.php)
-   Programmierung (https://mygully.com/forumdisplay.php?f=67)
-   -   HTML Hover Problem (https://mygully.com/showthread.php?t=1995861)

LordPresten 18.02.10 15:25

HTML Hover Problem
 
Moin Jungs,
habe eine Problem. ICh möchte es schaffen (wie bei 3dl.am) wenn man über einen Downloadlink hovert, dass dann eine weiße Box auftritt und Cover und infos zeigt.

IN diesen Code sollte es eingebaut werden:

PHP-Code:

<html>
<
head>
<
title>s</title>
<
style>
body {font-familyArialsans-serifHevetia;
      
color#636363;
      
font-size9pt;}
ul#dlist {
    
width40em;
    
height40em;
    
margin0padding0.0em;
    
border1px solid black;
    
background-color#fff;
    
text-alignright;}
  }
  * 
html ul#dlist {  /* Korrekturen fuer IE 5.x */
    
width11.6em;
    
w\idth10em;
    
padding-left0;
    
padd\ing-left0.0em;
  }
  

  
ul#dlist a {
    
display:block;
    
padding0.2em;
    
text-decorationnonefont-weightbold;
    
border1px solid gray;
    
border-left-colorwhiteborder-top-colorwhite;
    
color#636363; background-color: #fff;
    
text-alignleft;}
  }
  * 
html ul#dlist a {  /* Breitenangaben nur fuer IE */
    
width100%;
    
w\idth10em;
  }
  
ul#dlist a:hover {
    
border-colorwhite;
    
border-left-color#fff; border-top-color: #fff; border-right-color: gray;
    
border-top-width0px;
    
colorblackbackground-color#B4D6FF;
  
}
ul#dlist li:hover ul {
    
displayblock;  /* Unternavigation in modernen Browsern einblenden */
  
}

</
style>
</
head>
<
body>

<
ul id="dlist">
    
    <
li><a href="http://google.de">Beispiel 1</a></li>
    <
li><a href="http://google.de">Beispiel 3</a></li>
    <
li><a href="http://google.de">Beispiel 1           hh</a></li>
    <
li><a href="http://google.de">Beispiel 2</a></li>
    <
li><a href="http://google.de">Beispiel 3</a></li>
    <
li><a href="nav_definieren.htm">Beispiel 1           hh</a></li>
    <
li><a href="nav_formatieren.htm">Beispiel 2</a></li>
    <
li><a href="nav_rollover.htm">Beispiel 3</a></li>
    <
li><a href="nav_definieren.htm">Beispiel 1           hh</a></li>
    <
li><a href="nav_formatieren.htm">Beispiel 2</a></li>
    <
li><a href="nav_rollover.htm">Beispiel 3</a></li>
    <
li><a href="nav_definieren.htm">Beispiel 1           hh</a></li>
    <
li><a href="nav_formatieren.htm">Beispiel 2</a></li>
    <
li><a href="nav_rollover.htm">Beispiel 3</a></li>
    <
li><a href="nav_definieren.htm">Beispiel 1           hh</a></li>
    <
li><a href="nav_formatieren.htm">Beispiel 2</a></li>
    <
li><a href="nav_rollover.htm">Beispiel 3</a></li>
  </
ul

Hoffe ihr könnt mir helfen

CamelionX 18.02.10 16:29

naja warum benutzt du nicht einfach deren wz_tooltip.js?
wenn man nen bisschen googelt siehst du das sie es von hier her haben:
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
auch wenn sie es noch ein bisschen umgeändert haben damit sie nicht die ganzen tooltips eingeben müssen ;D

kratos85 19.02.10 21:30

mach es dir ganz einfach, arbeite dich in jquery ein, ist ne kleine java bibliothek die alles kann was dein herz begehrt, und dann wie camelion schreibt über nen tooltip, das kannst du dann mittles div machen.
ne weitere lösung wäre nen div anzulegen als tooltip und via html/css den typ im css als display: none und dann via css #element a:hover display wieder einzublenden


Alle Zeitangaben in WEZ +1. Es ist jetzt 14:47 Uhr.

Powered by vBulletin® (Deutsch)
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.