CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

<head><title> Test :)</title>

<script type="text/javascript>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script>

jQuery('#hoverdiv').hoverdiv( 

  function() {$('#Kindelement').show();},

  function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

  background-color: red;

  z-index: 1;

}

.Kindelement

{

  position: absolute;

  top:0;

  background-color: blue;

  -moz-transition: all 0.5s ease 0s;

  -webkit-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

  opacity: 0;

  z-index: 2;

   

}

.hoverdiv

{

  position: relative;

}

.hoverdiv:hover + .Kindelement

{

  opacity: 1;

}​

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey; 

color: white; 

border-radius: 50px !important; 

font-family: &quot;Helvetica Neue&quot;, 

Arial, sans-serif !important; 

float: none !important;" ;>

<a>+</a>

<div id="Kindelement" 

style="color: white; 

background: grey; 

position: absolute;

top: 770px !important; 

 opacity: 0;">

<a href="link" style="color: white; background: grey">Name</a>

</div>

 </div>

 

 

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

Computer, HTML, programmieren, CSS, JavaScript
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.