Trigger css hover with jQuery

Question

Is it possible to link a CSS hover action to another link with jQuery (or pure CSS for that matter)?

I have a combined hover and tooltip animation meant as an overlay over a map. What I want to achieve is having the hover firing when hovering over the city names from the list.

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>

I've also included this as a fiddle: https://jsfiddle.net/7Lsvdqpx/3/

I have tried several suggested methods without any luck, such as this: Trigger hover with jQuery?

stackoverflow.com/questions/14013958/… Have you tried this one? You need to include the Javascript you've tried too so we can help you — mintychai
– mintychai, Commented Aug 14, 2017 at 21:37

Jon Uleis · Accepted Answer · 2017-08-14 21:39:41Z

You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:

.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

The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.

Here's the full example with the hover implemented for all relevant properties:

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>

This is brilliant. I was hoping this was possible with pure CSS, and it was. Thanks a bunch!

Andriy Lozynskiy · Accepted Answer · 2017-08-14 22:42:33Z

Jon's answer is good but if you have many cities you can try mine with 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>

This is excellent. As for now I don't know how many cities there will be for this project, so I am very grateful for your jQuery contribution. Thank you very much Andriy!

Collectives™ on Stack Overflow

Trigger css hover with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related