jQuery: Как я могу добавить div, чтобы покрыть элемент наведением мыши?

Question

jQuery: Как я могу добавить div, чтобы покрыть элемент наведением мыши?

0

Я хочу добавить div, чтобы покрыть элемент, который наведите курсор мыши на веб-страницу. Я попытался сделать следующее, но это не получилось. Как мне это сделать? Благодарю!

  jQuery(function ($) {

    $("*").bind("mouseenter.noteEvent", function (event) {

    var offset = $(this).offset();
    var enterBg = "<div id = 'tooltip_enterbg'></div>";
    $("body").append(enterBg);
    $("#tooltip_enterbg")
        .css({
                "top": offset.top + "px",
                "left": offset.left + "px",
                "width": $(this).width(),
                "height": $(this).height(),
                "opacity": 0.5,
                "background-color": "#FFFF00"}
        );

    });

    $("*").bind("mouseleave.noteEvent", function (event) {
       $("#tooltip_enterbg").remove();
    });

});

jsfiddle Демо: В этой демонстрации, когда мышь переходит на "AAA", вся страница превращается в светлую, я хочу, чтобы "AAA" превращался в светлое.

tao4yu 20 март 2014, в 08:49

Источник

0

Примечание: вы подключаете эти обработчики событий ко многим элементам. Вы могли бы рассмотреть делегирование события - $("body").on("mouseenter", "*", function() { ... });
T.J. Crowder 20 март 2014, в 07:50

Теги:

javascript

jquery

html

2 ответа

Ещё вопросы

Примечание: вы подключаете эти обработчики событий ко многим элементам. Вы могли бы рассмотреть делегирование события - $("body").on("mouseenter", "*", function() { ... });

NDK · Answer 1 · 2014-03-20T06-39-00.000Z

Используйте следующий код:

jQuery(function ($) {

    $("p").bind("mouseenter.noteEvent", function (event) {

    var offset = $(this).offset();
    var enterBg = "<div id = 'tooltip_enterbg'></div>";
    $("body").append(enterBg);
    $("#tooltip_enterbg")
        .css({
                "top": offset.top + "px",
                "left": offset.left + "px",
                "width": $(this).width(),
                "height": $(this).height(),
                "opacity": 0.5,
                "background-color": "#FFFF00",
                "position": "fixed"}
        );
    });

    $("p").bind("mouseleave.noteEvent", function (event) {
       $("#tooltip_enterbg").remove();
    });
});

Демо здесь: http://jsfiddle.net/Mv472/3/

T.J. Crowder · Answer 2 · 2014-03-20T06-24-00.000Z

Бит, который вы упускаете, имеет position: absolute, например:

$("#tooltip_enterbg")
    .css({
            "top": offset.top + "px",
            "left": offset.left + "px",
            "width": $(this).width(),
            "height": $(this).height(),
            "opacity": 0.5,
            "background-color": "#FFFF00",
            "position": "absolute"}     // <===== Here
    );

Примечание:

Нет необходимости искать элемент, который вы только что добавили. + Изменить

var enterBg = "<div id = 'tooltip_enterbg'></div>";
$("body").append(enterBg);
$("#tooltip_enterbg")
    .css/*...*/

в

var enterBg = $("<div id = 'tooltip_enterbg'></div>");
$("body").append(enterBg);
enterBg
    .css/*...*/

Я попробовал "position": "absolute" , но он влияет на то, что вся страница становится светлее, я только хочу, чтобы div покрыл небольшой раздел.
@ tao4yu: Вам нужно position: absolute , чтобы позиционировать div. Если это не то, чего вы хотите, вам нужно посмотреть на его метрики в инструментах разработки и выяснить, почему это не то, чего вы хотите, но эта часть не является обязательной.