javascript - Trigger css hover with jQuery -
is possible link css hover action link jquery (or pure css matter)?
i have combined hover , tooltip animation meant overlay on map. want achieve having hover firing when hovering on city names 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: 0.20s ease-in-out !important; -moz-transition: 0.20s ease-in-out !important; -ms-transition: 0.20s ease-in-out !important; -o-transition: 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 included fiddle: https://jsfiddle.net/7lsvdqpx/3/
i have tried several suggested methods without luck, such this: trigger hover jquery?
you can pure css , no jquery using adjacent selector (~). i've implemented in snippet below , had add few html classes. here's example of how 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 hover .list-ny menu item, select adjacent .location element has .dot-ny:before in , apply relevant styles.
here's full example hover implemented 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: 0.20s ease-in-out !important; -moz-transition: 0.20s ease-in-out !important; -ms-transition: 0.20s ease-in-out !important; -o-transition: 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>
Comments
Post a Comment