Как использовать свойство hover с другим элементом?

Question

• 1000 это, я хочу, чтобы эта кнопка исчезла.

Я пытаюсь исправить элементы списка и сделать кнопку исправления (push_pin) в списке активной, пассивной, когда она проходит по нему.

 $(".dashboard_li").mouseover(
            function () {
                $('.pin_false').css("display", "block"); 
            } 
        ); 
        $(".dashboard_li").mouseout(
            function () {
                $('.pin_false').css("display", "none");
            }
        ); 

Я могу сделать это так, но я должен показать его класс '.pin_false' независимо от того, на каком элементе я работаю.

Все Элементы '.pin_false' теперь становятся активными или пассивными при наведении курсора на любой элемент списка.

Answer 1

Pure CSS Решение:

.pin_false {
    display: none;
}

.dashboard_li:hover .pin_false {
    display: block;
}

Это гарантирует, что появится только элемент с классом pin_false, который является дочерним по отношению к элементу dashboard_li, над которым наведен курсор.

Answer 2

спасибо за ответы. Я решил это следующим образом:

Я дал '.dashboard_li' и '.pin_false' уникальный идентификатор. Каждый раз, когда я наводил курсор на .dashboard_li, я брал уникальный идентификатор и определял его как «ID». В '.pin_false'. И я сделал свою работу следующим образом. Всем спасибо :)

            $(".dashboard_li").mouseover(
                function (e) {
                    var id = $(this).attr("id");
                    var newId = id.substring(8, id.length);
                    var pin_value = "#pin_" + newId;
                    $(pin_value).css("display", "block");
                }
            );
            $(".dashboard_li").mouseout(
                function () {
                    $('.pin_false').css("display", "none");
                }
            );

Answer 3

Чтобы воздействовать только на элемент .dashboard_li, на который был наведен курсор, вы должны использовать цель события mouseover для охвата вашего .pin_false запроса:

$(".dashboard_li").mouseover(function(mouseoverEvent) {
  $(mouseoverEvent.currentTarget).find('.pin_false').css("display", "block")
});
$(".dashboard_li").mouseout(function(mouseoutEvent) {
  $(mouseoutEvent.currentTarget).find('.pin_false').css("display", "none")
});

При этом, как говорится, Я думаю, что чистый CSS ответ Джона Уоррена является оптимальным решением.

Answer 4

Попробуйте добавить псевдокласс в CSS, определяя display:visible и display :none, а в jQuery добавьте / удалите псевдокласс