将鼠标悬停在链接上以影响另一个链接

Hover Over Link to Effect Another Link

本文关键字：链接 影响 另一个 悬停 鼠标      更新时间：2023-09-26

我想做的是，当我将鼠标悬停在同一页面上的锚标记链接上时，它也需要影响相应的链接。

这可能在CSS中是可能的，但我认为JQuery会处理得更好。

我是jquery新手

下面是我的代码:

<script>
$('.js-tooltip').on('click', function () {
  $(this).toggleClass('js-tooltip-active')
})
</script>
这是我的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>链接列表。

我想要的是尝试和复制圆圈悬停的效果，但在链接上，我不想在地图上显示和隐藏圆圈标记，我只希望它们在相应的链接悬停时出现。

地图标记也从紫色变为绿色，我可以在侧边栏的链接上复制这种效果。

基本上当我将鼠标悬停在圆形标记上时标题标签就会弹出链接，这也是我想让链接做的所以我可以将鼠标悬停在链接上它也会做同样的事情悬停在圆圈上，反之亦然

我不知道这是否有帮助，但这是我得到的代码的工具提示/热点这里的链接，然后我改变了它的代码看起来像一个圆圈。

谢谢。

Ok....因为我的Jquery技能很差，所以我相信这可以被重构和简化，但是现在就开始吧。

我们必须为每个列表项目添加一个单独的属性，我使用data-attribute，然后可以使用它来选择每个单独的地图点，这些点将拥有自己的ID

<<p> JSfiddle演示/strong>

修改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');
});

/*当工具提示悬停时，找到具有与悬停元素ID匹配的数据项属性的锚点，并切换活动类*/

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

/*当列表项链接悬停时，找到匹配的ID切换js-tooltip-active类*/

这就是你需要的。这不是我的代码，所有的功劳归于下面链接的作者。查看链接以查看实际示例。

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

相关文章：