Наведите указатель мыши на ссылку Еще одна ссылка

Question

Что я пытаюсь сделать, когда я наводил ссылку на привязку тега на той же странице, она также должна влиять на соответствующую ссылку.

Возможно, это возможно в CSS, но я думаю, что JQuery справится с этим лучше.

Im новой для JQuery

Heres мой код:

<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> 

Что выше код делает, когда я наведите курсор мыши на точку доступа небольшой заголовок коробки что пользователь может щелкнуть.

<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> 

Это список <li> ссылки, что я хотел бы подключить к карте.

Что я хочу, чтобы попытаться воспроизвести эффект наведения круга, но по ссылкам, я не хочу показывать и скрывать маркеры круга на карте. Мне просто хотелось бы, чтобы они отображались, когда соответствующая ссылка имеет завис.

Также маркеры карты меняют цвет от фиолетового до зеленого, я могу воспроизвести этот эффект, зависающий над ссылками на боковой панели.

Таким образом, в основном, когда я наводил указатель на круг, тег заголовка появляется со ссылкой, это то, что мне бы хотелось, чтобы ссылка была сделана так, чтобы я мог навести курсор на ссылку, и она будет делать то же самое и зависать над круга и наоборот.

Я не знаю, помогает ли это, но это то, где я получил код для всплывающей подсказки/точки доступа. Имеет ссылку, затем я изменил код, чтобы он выглядел кругом.

Спасибо.

Answer 1

Хорошо .... это занимает немного делать, потому что мои навыки Jquery бедны, так что я уверен, что это может быть переработано и упрощено, но здесь идет.

Мы должны добавить отдельный атрибут для каждого элемента списка, я использую data-attribute, который затем может быть использован для выбора каждой отдельной точки карты, которая будет иметь свой собственный ID

JSfiddle Demo

Пересмотренный 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

Я просто добавил `.активный»класс для элемента списка ссылки

#locationList a.active { 
    color:red; 
} 

Edit- и всплывающей нечто подобное

.tooltip.current { 
    background: #b1d12d; 
} 

Jquery

Я добавил эти две функции

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

/* когда всплывающая подсказка зависает, найдите якорь, который ha са атрибут элемента данных, который соответствует идентификатору наведен элемент и переключать активный класс */

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

/* если ссылка элемента списка наведена, найти соответствующий ID переключить JS-подсказка-активный класс */

Answer 2

Это то, что вам нужно. это не мой код, все заслуги автора ссылки ниже. Проверьте ссылку, чтобы увидеть живой пример.

#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/