<style><!-- [et_pb_line_break_holder] -->.marker {<!-- [et_pb_line_break_holder] --> position:absolute;<!-- [et_pb_line_break_holder] --> width:8%;<!-- [et_pb_line_break_holder] --> border-radius:50%;<!-- [et_pb_line_break_holder] --> border:1px solid red;<!-- [et_pb_line_break_holder] --> background-color:#fff;<!-- [et_pb_line_break_holder] --> cursor:pointer;<!-- [et_pb_line_break_holder] --> transform:translate(-50%,-50%);<!-- [et_pb_line_break_holder] --> } <!-- [et_pb_line_break_holder] --> .marker:before{<!-- [et_pb_line_break_holder] --> content: "";<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> padding-top: 100%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #eins {<!-- [et_pb_line_break_holder] --> top:8%;<!-- [et_pb_line_break_holder] --> left:40%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #zwei {<!-- [et_pb_line_break_holder] --> top:25%;<!-- [et_pb_line_break_holder] --> left:56%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #drei {<!-- [et_pb_line_break_holder] --> top:82%;<!-- [et_pb_line_break_holder] --> left:38%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #texte {<!-- [et_pb_line_break_holder] --> width:200px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .textbox {<!-- [et_pb_line_break_holder] --> border:1px solid #666;<!-- [et_pb_line_break_holder] --> border-radius:5px;<!-- [et_pb_line_break_holder] --> line-height:3em;<!-- [et_pb_line_break_holder] --> background-color:#fff;<!-- [et_pb_line_break_holder] --> cursor:pointer;<!-- [et_pb_line_break_holder] --> width:100%;<!-- [et_pb_line_break_holder] --> padding:0 1em;<!-- [et_pb_line_break_holder] --> box-sizing:border-box;<!-- [et_pb_line_break_holder] --> } <!-- [et_pb_line_break_holder] --> </style><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --> jQuery(document).ready(function($) {<!-- [et_pb_line_break_holder] --> //marker setzen<!-- [et_pb_line_break_holder] --> $("#karte").append('<div class="marker" id="eins"></div>');<!-- [et_pb_line_break_holder] --> $("#karte").append('<div class="marker" id="zwei"></div>');<!-- [et_pb_line_break_holder] --> $("#karte").append('<div class="marker" id="drei"></div>');<!-- [et_pb_line_break_holder] --> //textboxen setzen<!-- [et_pb_line_break_holder] --> $("#texte").append('<div class="textbox" id="text_eins">Text 1</div>');<!-- [et_pb_line_break_holder] --> $("#texte").append('<div class="textbox" id="text_zwei">Text 2</div>');<!-- [et_pb_line_break_holder] --> $("#texte").append('<div class="textbox" id="text_drei">Text 3</div>');<!-- [et_pb_line_break_holder] --> //marker Hover<!-- [et_pb_line_break_holder] --> $(".marker").hover(function() {<!-- [et_pb_line_break_holder] --> var nr="#text_" + $(this).attr("id");<!-- [et_pb_line_break_holder] --> $(this).css({"background-color":"red"});<!-- [et_pb_line_break_holder] --> $(nr).css({"background-color":"red"});<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> function() {<!-- [et_pb_line_break_holder] --> var nr="#text_" + $(this).attr("id");<!-- [et_pb_line_break_holder] --> $(this).css({"background-color":"#fff"});<!-- [et_pb_line_break_holder] --> $(nr).css({"background-color":"#fff"});<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] --> //textboxen Hover<!-- [et_pb_line_break_holder] --> $(".textbox").hover(function() {<!-- [et_pb_line_break_holder] --> var nr="#" + $(this).attr("id").substr(5);console.log(nr);<!-- [et_pb_line_break_holder] --> $(this).css({"background-color":"red"});<!-- [et_pb_line_break_holder] --> $(nr).css({"background-color":"red"});<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> function() {<!-- [et_pb_line_break_holder] --> var nr="#" + $(this).attr("id").substr(5);<!-- [et_pb_line_break_holder] --> $(this).css({"background-color":"#fff"});<!-- [et_pb_line_break_holder] --> $(nr).css({"background-color":"#fff"});<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> ); <!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> </script>