Jak najechać na siebie wzajemnie na różne elementy za pomocą jquery. - javascript, jquery, html, css, hover

Próbuję to zrobić, aby po najechaniu wskaźnikiem na element listy odpowiedni element został podświetlony, a po najechaniu wskaźnikiem odpowiedni element listy został wyróżniony.

Do tej pory po najechaniu kursorem na element listy podświetla on odpowiedni obszar mapy, ale jak mam go napisać, aby zawisł na boki?

Próbowałem:

              $(".one, #one").hover(function(){
$("#one, .one").attr("fill", "#213A46");
$(".info-one").fadeIn();
},
function(){
$("#one, .one").attr("fill", "#009A8B");
$(".info-one").hide();
});

i to nie działało. Wszelkie sugestie byłyby pomocne. Oto kod tego, nad czym obecnie pracuję: http://codepen.io/anon/pen/zGzoMY

Odpowiedzi:

0 dla odpowiedzi № 1

Nie możesz zmienić stanu elementu, więc musisz zmienić swój .region-list li:hover { przez .region-list li:hover, .region-list li.hover {.

Następnie możesz dodać go do swojego JS, tj .:

$("#four").hover(
function() {
$("#four").attr("fill", "#213A46");
$(".four").addClass("hover");
$(".info-four").fadeIn();
},
function() {
$("#four").attr("fill", "#3F6C80");
$(".four").removeClass("hover");
$(".info-four").hide();
}

---

0 dla odpowiedzi nr 2

To nie jest możliwe. Musisz dodać taką klasę .hover do elementu.

widzieć: https://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

Sposób wywołania najechania kursorem na li poprzez najechanie na mapę jest mniej więcej taki:

$("#one").hover(function() {
$(".one").trigger("mouseenter");
});

Ale aby dodać klasę, zrobisz coś takiego

$("#one").hover(function() {
$(".one").addClass("hover");
});

Następnie pamiętaj, aby usunąć klasę na myszy.

---

0 dla odpowiedzi № 3

Musisz dodać hover program obsługi grafiki, która zawiera #one. W przeciwnym razie, gdy najedziesz myszką na tekst wewnątrz wielokąta, będzie to traktowane jak opuszczenie wielokąta.

$(".one, g:has(#one)").hover(function() {
$("#one").attr("fill", "#213A46");
$(".region-list .one").css({
backgroundColor: "#213a46",
color: "#ffffff"
});
$(".info-one").fadeIn();
},
function() {
$("#one").attr("fill", "#009A8B");
$(".region-list .one").css({
backgroundColor: "inherit",
color: "inherit"
});
$(".info-one").hide();
});

Zmodyfikowany Codepen

Właśnie zaktualizowałem #one, pozostałe są podobne. Lepiej byłoby to zaimplementować za pomocą metod DRY, w których elementy wzajemne można znaleźć za pomocą atrybutów danych, ale nie zawracałem sobie głowy tym przepisywaniem.

---