Question

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

它可能在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>链接列表。

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

地图标记也会将颜色从紫色变为绿色我能够复制悬停在侧边栏链接上的效果。

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

我不知道这是否有帮助，但这是我获得工具提示/热点的代码的地方继承人的链接，然后我更改了它的代码看起来像圆圈。

感谢。

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

我刚为列表项链接添加了一个`.active'类

#locationList a.active {
    color:red;
}

编辑 - 并为工具提示类似的东西

.tooltip.current {
  background: #b1d12d;
}

Jquery

我添加了这两个功能

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

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

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

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

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/

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

2 个答案: