javascript - Hover Over Link to Effect Another Link -

javascript - Hover Over Link to Effect Another Link -

what im trying when hover on anchor tag link on same page, needs impact corresponding link.

it might possible in css think jquery handle better.

im new jquery

heres code:

<script> $('.js-tooltip').on('click', function () { $(this).toggleclass('js-tooltip-active') }) </script>

heres css:

.tooltip { position: relative; display: inline-block; height: 18px; width: 18px; line-height: 26px; padding: 0 0; border-radius: 15px; font-size: 12px; font-weight: bold; color: #fff; background: #b71a71; box-shadow: none; white-space: nowrap; cursor: pointer; } .tooltip:hover { background: #b1d12d; } .tooltip-wrapper { pointer-events: none; position: absolute; width: 250px; margin-left: -125px; left: 50%; bottom: 100%; margin-bottom: 5px; text-align: center; text-decoration: none; opacity: 0; transition: opacity 0.5s ease; } .js-tooltip-active .tooltip-wrapper, .tooltip:hover .tooltip-wrapper, .tooltip-wrapper:hover { pointer-events: auto; opacity: 1; } .tooltip-wrapper:after { z-index: 11; display: block; position: absolute; left: 50%; margin-left: -7px; content: " "; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #333; } .tooltip-wrapper:before { bottom: -9px; display: block; position: absolute; left: 50%; margin-left: -8px; content: " "; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255,255,255,0.1); } .tooltip-text { display: inline-block; position: relative; padding: 6px 9px; z-index: 10; white-space: normal; font-size: 12px; font-weight: normal; line-height: 18px; background: #333; background: rgba(0,0,0,0.8); color: #fff; border-radius: 5px; text-shadow: none; cursor: default; box-shadow: 0 1px rgba(255,255,255,0.1); } <div class="mapbox"><img src="#" style="z-index: 101; border: none" width="672" height="744" usemap="#map"/> <a class="tooltip js-tooltip manmap" href="#" style="top: -315px; left: 270px; border: none; "><span class="tooltip-wrapper" style="z-index: 103; border: none; "><span class="tooltip-text" style="z-index: 103; cursor: pointer; border: none;">view</span></span></a> <a class="tooltip js-tooltip lonmap" href="#" style="top: -150px; left: 365px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">view</span></span></a> </div>

what code above when hover on hotspot little title box appears user can click.

<div id="col3" class="right"> <h2>select location<img src="#" width="21" height="18" alt="icon" /></h2> <div class="box"> <h3>select</h3> <ul id="locationlist"> <li class="a"><a href="#">a</a></li> <li><a href="#">b</a></li> </ul> </div>

this <li> link list connect map.

what want seek , replicate effect of circle hover on links, don't want show , hide circle markers on map them appear when corresponding link has been hovered over.

also map markers alter colour violet greenish able replicate effect hovering on links in sidebar.

so when hover on circle marker title tag pops link, link can hover on link , same , hovering on circle , vice-versa.

i don't know if helps got code tooltip/hotspot heres link, changed code circle.

thanks.

ok....it took little doing because jquery skills poor i'm sure refactored , simplified here goes.

we have add together individual attribute each list item, utilize data-attribute can used select each individual map point have it's own id

jsfiddle demo

revised html

<div id="col5" class="left"> <h1>pick location</h1> <div class="mapbox"> <a id="a" class="tooltip js-tooltip" href="#"> <span class="tooltip-wrapper"> <span class="tooltip-text">view 1</span> </span> </a> <a id="b" class="tooltip js-tooltip" href="#"> <span class="tooltip-wrapper" > <span class="tooltip-text">view 2</span> </span> </a> </div> </div> <div class="box"> <h3>select location</h3> <ul id="locationlist"> <li><a data-item="a" href="#">view 1</a></li> <li><a data-item="b" href="#">view 2</a></li> </ul> </div>

css

i added `.active' class list item links

#locationlist a.active { color:red; }

edit- , tooltip similar

.tooltip.current { background: #b1d12d; }

jquery

i added these 2 functions

$('.tooltip').hover(function() { $('a[data-item="'+this.id+'"]').toggleclass('active'); });

/* when tooltip hovered, find anchor has data-item attribute matches id of hovered element , toggle active class */

$('#locationlist a').hover(function() { $('#' + $(this).data('item')).toggleclass('js-tooltip-active'); $('#' + $(this).data('item')).toggleclass('current'); /* edit hover */ });

/* when list item link hovered, find matching id toggle js-tooltip-active class */

javascript jquery html css hover