Hover Over Link to Effect Another Link

Question

What im trying to do is when I hover over a anchor tag link on the same page, it also needs to affect the corresponding link.

It might be possible in CSS but I think JQuery would handle this better.

Im new to jquery

Heres my code:

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

Heres my 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 the code above does is when I hover over the hotspot a small title box appears that the user can click.

<div id="col3" class="right">

<h2>Select a 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 is the <li> link list that I would like to connect to the map.

What I want is to try and replicate the effect of the circle hover but on the links, I don't want to show and hide the circle markers on the map I would just like them to appear when the corresponding link has been hovered over.

Also the Map markers change colour from purple to green am I able to replicate that effect hovering over the links in the sidebar.

So basically when I hover over the circle marker the title tag pops up with the link, that is what I would like the link to do as well so I can hover over link and it will do the same and hovering over the circle and vice-versa.

I don't know if this helps but this is where I got the code for the tooltip/hotspot Heres the link, then I changed the code for it to look circle.

Thanks.

Answer 1

Ok....it took a little doing because my Jquery skills are poor so I'm sure this could be refactored and simplified but here goes.

We have to add an individual attribute to each list item, I use a data-attribute which can then be used to select each individual map point which will have it's own ID

JSfiddle Demo

Revised HTML

<div id="col5" class="left">

    <h1>Pick A 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 a 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 just added an `.active' class for the list item links

#locationList a.active {
    color:red;
}

EDIT- and for the tooltip something similar

.tooltip.current {
  background: #b1d12d;
}

Jquery

I added these two functions

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

/* when a tooltip is hovered, find the anchor which has a data-item attribute that matches the ID of the hovered element and toggle the active class */

  $('#locationList a').hover(function() {
    $('#' + $(this).data('item')).toggleClass('js-tooltip-active');
    $('#' + $(this).data('item')).toggleClass('current'); /* EDIT for hover */
});

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

Answer 2

This is what you need. it is no my code all the credit goes to the author of the link below. Check the link to see the live example.

    #one:hover ~ #three,
#six:hover ~ #four,
#seven:hover ~ .box {
    background-color: black;
    color: white;
}
#four {
    margin-left: -35px;
}
#six {
    left: 80px;
    position: relative;
}
.box {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    outline: 1px solid black;
    text-align: center;
    width: 30px;
}

http://jsfiddle.net/ThinkingStiff/a3y52/