使用jQuery觸發CSS懸停

是否可以使用jQuery（或純CSS）將CSS懸停動作鏈接到另一個鏈接？使用jQuery觸發CSS懸停

我有一個組合的懸停和工具提示動畫，意味着疊加在地圖上。我想要實現的是在列表中懸停在城市名稱上時進行懸停點火。

a { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    color: #d82631; 
 
} 
 

 
.location { 
 
    position: absolute; 
 
} 
 

 
.kart_dot { 
 
    position: relative; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-top: -10px; 
 
    margin-left: -10px; 
 
    cursor: pointer; 
 
} 
 

 
.kart_dot::before { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #d82631 none repeat scroll 0% 0%; 
 
    border-radius: 50%; 
 
    margin-top: -6px; 
 
    margin-left: -6px; 
 
} 
 

 
.kart_dot:hover::before, 
 
.kart_dot:focus::before, 
 
.kart_dot:active::before { 
 
    background-color: #000; 
 
    -webkit-transition: all 0.20s ease-in-out !important; 
 
    -moz-transition: all 0.20s ease-in-out !important; 
 
    -ms-transition: all 0.20s ease-in-out !important; 
 
    -o-transition: all 0.20s ease-in-out !important; 
 
    width: 18px; 
 
    height: 18px; 
 
    margin-top: -9px; 
 
    margin-left: -9px; 
 
} 
 

 
[data-tooltip]:before, 
 
[data-tooltip]:after, 
 
.tooltip:before, 
 
.tooltip:after { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    pointer-events: none; 
 
} 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after, 
 
[data-tooltip]:focus:before, 
 
[data-tooltip]:focus:after, 
 
.tooltip:hover:before, 
 
.tooltip:hover:after, 
 
.tooltip:focus:before, 
 
.tooltip:focus:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 

 
.tooltip:after, 
 
[data-tooltip]:after { 
 
    z-index: 1000; 
 
    padding: 15px; 
 
    width: 160px; 
 
    color: #000; 
 
    content: attr(data-tooltip); 
 
    font-size: 14px; 
 
    line-height: 0.9; 
 
} 
 

 
.tooltip-hoyre:before, 
 
.tooltip-hoyre:after { 
 
    bottom: 50%; 
 
    left: 100%; 
 
} 
 

 
.tooltip-hoyre:before { 
 
    margin-bottom: 0; 
 
    margin-left: -8px; 
 
    border-top-color: transparent; 
 
    border-right-color: #000; 
 
    border-right-color: hsla(0, 0%, 20%, 0.9); 
 
} 
 

 
.tooltip-hoyre:hover:before, 
 
.tooltip-hoyre:hover:after, 
 
.tooltip-hoyre:focus:before, 
 
.tooltip-hoyre:focus:after { 
 
    -webkit-transform: translateX(12px); 
 
    -moz-transform: translateX(12px); 
 
    transform: translateX(12px); 
 
} 
 

 
.tooltip-hoyre:after { 
 
    margin-left: 0; 
 
    margin-bottom: -16px; 
 
    margin-left: -18px; 
 
}

<div><a href="#new_york">New York</a></div> 
 
<div><a href="#washington">Washington</a></div> 
 

 
<div class="location" style="top: 20%; left: 20%;"> 
 
    <a href="#new_york" class="tooltip-hoyre" data-tooltip="New York"> 
 
    <div class="kart_dot"></div> 
 
    </a> 
 
</div> 
 

 
<div class="location" style="top: 38%; left: 20%;"> 
 
    <a href="#washington" class="tooltip-hoyre" data-tooltip="Washington"> 
 
    <div class="kart_dot"></div> 
 
    </a> 
 
</div>

我也包括這是一個小提琴：https://jsfiddle.net/7Lsvdqpx/3/

我嘗試了好幾種建議的方法沒有任何的運氣，像這樣的：Trigger hover with jQuery?

來源

2017-08-14 TNF

https://stackoverflow.com/questions/14013958/add-hover-selector-to-class-1-when-hovering-over-class-2您是否嘗試過這個？你需要包括你試過的Javascript，所以我們可以幫你 – mintychai

你可以做這與純CSS和沒有jQuery通過使用相鄰的選擇器（~）。我已經在下面的代碼片段中實現了它，並且不得不添加一些HTML類。下面是如何工作的一個例子：

.list-ny:hover ~ .location .dot-ny:before, 
.list-ny:hover ~ .location .dot-ny:after, 
.list-wa:hover ~ .location .dot-wa:before, 
.list-wa:hover ~ .location .dot-wa:after

上面的代碼中說...如果你懸停.list-ny菜單項，然後選擇中有一個.dot-ny:before相鄰.location元素和應用相關的樣式。

下面是對所有相關屬性來實現懸停的完整的例子：

a { 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #d82631; 
 
} 
 

 
.location { 
 
    position: absolute; 
 
} 
 

 
.kart_dot { 
 
    position: relative; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-top: -10px; 
 
    margin-left: -10px; 
 
    cursor: pointer; 
 
} 
 

 
.kart_dot::before { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #d82631 none repeat scroll 0% 0%; 
 
    border-radius: 50%; 
 
    margin-top: -6px; 
 
    margin-left: -6px; 
 
} 
 

 
.kart_dot:hover::before, 
 
.kart_dot:focus::before, 
 
.kart_dot:active::before, 
 
.list-ny:hover ~ .location .dot-ny .kart_dot:before, 
 
.list-wa:hover ~ .location .dot-wa .kart_dot:before { 
 
    background-color: #000; 
 
    -webkit-transition: all 0.20s ease-in-out !important; 
 
    -moz-transition: all 0.20s ease-in-out !important; 
 
    -ms-transition: all 0.20s ease-in-out !important; 
 
    -o-transition: all 0.20s ease-in-out !important; 
 
    width: 18px; 
 
    height: 18px; 
 
    margin-top: -9px; 
 
    margin-left: -9px; 
 
} 
 

 
[data-tooltip]:before, 
 
[data-tooltip]:after, 
 
.tooltip:before, 
 
.tooltip:after { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    pointer-events: none; 
 
} 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after, 
 
[data-tooltip]:focus:before, 
 
[data-tooltip]:focus:after, 
 
.tooltip:hover:before, 
 
.tooltip:hover:after, 
 
.tooltip:focus:before, 
 
.tooltip:focus:after, 
 
.list-ny:hover ~ .location .dot-ny:before, 
 
.list-ny:hover ~ .location .dot-ny:after, 
 
.list-wa:hover ~ .location .dot-wa:before, 
 
.list-wa:hover ~ .location .dot-wa:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 

 
.tooltip:after, 
 
[data-tooltip]:after { 
 
    z-index: 1000; 
 
    padding: 15px; 
 
    width: 160px; 
 
    color: #000; 
 
    content: attr(data-tooltip); 
 
    font-size: 14px; 
 
    line-height: 0.9; 
 
} 
 

 
.tooltip-hoyre:before, 
 
.tooltip-hoyre:after { 
 
    bottom: 50%; 
 
    left: 100%; 
 
} 
 

 
.tooltip-hoyre:before { 
 
    margin-bottom: 0; 
 
    margin-left: -8px; 
 
    border-top-color: transparent; 
 
    border-right-color: #000; 
 
    border-right-color: hsla(0, 0%, 20%, 0.9); 
 
} 
 

 
.tooltip-hoyre:hover:before, 
 
.tooltip-hoyre:hover:after, 
 
.tooltip-hoyre:focus:before, 
 
.tooltip-hoyre:focus:after, 
 
.list-ny:hover ~ .location .dot-ny:before, 
 
.list-ny:hover ~ .location .dot-ny:after, 
 
.list-wa:hover ~ .location .dot-wa:before, 
 
.list-wa:hover ~ .location .dot-wa:after { 
 
    -webkit-transform: translateX(12px); 
 
    -moz-transform: translateX(12px); 
 
    transform: translateX(12px); 
 
} 
 

 
.tooltip-hoyre:after { 
 
    margin-left: 0; 
 
    margin-bottom: -16px; 
 
    margin-left: -18px; 
 
}

<div class="list-ny"><a href="#new_york">New York</a></div> 
 
<div class="list-wa"><a href="#washington">Washington</a></div> 
 

 
<div class="location" style="top: 20%; left: 20%;"> 
 
    <a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York"> 
 
    <div class="kart_dot"></div> 
 
    </a> 
 
</div> 
 

 
<div class="location" style="top: 38%; left: 20%;"> 
 
    <a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington"> 
 
    <div class="kart_dot"></div> 
 
    </a> 
 
</div>

來源

2017-08-14 21:39:41

這真是太棒了。我希望這是可能的純CSS，它是。謝謝一堆！ – TNF

喬恩的答案是好的，但如果你有很多的城市，你可以嘗試礦用jQuery。

$('.city a').mouseover(function() { 
 
    $('.location').find('a[href="'+$(this).attr('href')+'"]').addClass('hovered'); 
 
    }).mouseleave(function() { 
 
     $('.location').find('a[href="'+$(this).attr('href')+'"]').removeClass('hovered'); 
 
    });

a { 
 
      text-decoration: none; 
 
     } 
 
     a:hover { 
 
      color: #d82631; 
 
     } 
 

 
     .location { 
 
      position: absolute; 
 
     } 
 

 
     .kart_dot { 
 
      position: relative; 
 
      width: 20px; 
 
      height: 20px; 
 
      margin-top: -10px; 
 
      margin-left: -10px; 
 
      cursor: pointer; 
 
     } 
 

 
     .kart_dot::before { 
 
      display: block; 
 
      content: ""; 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      width: 12px; 
 
      height: 12px; 
 
      background: #d82631 none repeat scroll 0% 0%; 
 
      border-radius: 50%; 
 
      margin-top: -6px; 
 
      margin-left: -6px; 
 
     } 
 

 
     .kart_dot:hover::before, 
 
     .kart_dot:focus::before, 
 
     .hovered .kart_dot::before, 
 
     .kart_dot:active::before { 
 
      background-color: #000; 
 
      -webkit-transition: all 0.20s ease-in-out !important; 
 
      -moz-transition: all 0.20s ease-in-out !important; 
 
      -ms-transition: all 0.20s ease-in-out !important; 
 
      -o-transition: all 0.20s ease-in-out !important; 
 
      width: 18px; 
 
      height: 18px; 
 
      margin-top: -9px; 
 
      margin-left: -9px; 
 
     } 
 

 
     [data-tooltip]:before, 
 
     [data-tooltip]:after, 
 
     .tooltip:before, 
 
     .tooltip:after { 
 
      position: absolute; 
 
      visibility: hidden; 
 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
      opacity: 0; 
 
      -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
      -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
      -webkit-transform: translate3d(0, 0, 0); 
 
      -moz-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
      pointer-events: none; 
 
     } 
 

 
     [data-tooltip]:hover:before, 
 
     [data-tooltip]:hover:after, 
 
     [data-tooltip]:focus:before, 
 
     [data-tooltip]:focus:after, 
 
     .tooltip:hover:before, 
 
     .tooltip:hover:after, 
 
     .tooltip:focus:before, 
 
     .hovered:before, 
 
     .hovered:after, 
 
     .tooltip:focus:after { 
 
      visibility: visible; 
 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
      opacity: 1; 
 
     } 
 

 
     .tooltip:after, 
 
     [data-tooltip]:after { 
 
      z-index: 1000; 
 
      padding: 15px; 
 
      width: 160px; 
 
      color: #000; 
 
      content: attr(data-tooltip); 
 
      font-size: 14px; 
 
      line-height: 0.9; 
 
     } 
 

 
     .tooltip-hoyre:before, 
 
     .tooltip-hoyre:after { 
 
      bottom: 50%; 
 
      left: 100%; 
 
     } 
 

 
     .tooltip-hoyre:before { 
 
      margin-bottom: 0; 
 
      margin-left: -8px; 
 
      border-top-color: transparent; 
 
      border-right-color: #000; 
 
      border-right-color: hsla(0, 0%, 20%, 0.9); 
 
     } 
 

 
     .tooltip-hoyre:hover:before, 
 
     .tooltip-hoyre:hover:after, 
 
     .tooltip-hoyre:focus:before, 
 
     .tooltip-hoyre:focus:after, 
 
     .hovered:before, 
 
     .hovered:after{ 
 
      -webkit-transform: translateX(12px); 
 
      -moz-transform: translateX(12px); 
 
      transform: translateX(12px); 
 
     } 
 

 
     .tooltip-hoyre:after { 
 
      margin-left: 0; 
 
      margin-bottom: -16px; 
 
      margin-left: -18px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list-ny city"><a href="#new_york">New York</a></div> 
 
<div class="list-wa city"><a href="#washington">Washington</a></div> 
 

 
<div class="location" style="top: 20%; left: 20%;"> 
 
    <a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York"> 
 
     <div class="kart_dot"></div> 
 
    </a> 
 
</div> 
 

 
<div class="location" style="top: 38%; left: 20%;"> 
 
    <a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington"> 
 
     <div class="kart_dot"></div> 
 
    </a> 
 
</div>

來源

2017-08-14 22:42:33

這很好。至於現在我不知道這個項目會有多少城市，所以我非常感謝你的jQuery貢獻。非常感謝Andriy！ – TNF

使用jQuery觸發CSS懸停

回答

相關問題