Изменение стиля через зависание?

Я изменил текст со свойством: видимости и она не работает :-(Изменение стиля через зависание?

У меня есть этот простой код, но он не работает:

$("#text").hover(function() { \t \t \t \t \t \t 
 
        \t //mouse enter 
 
        \t $("#blackbox").css({ \t \t \t 
 
         "visibility": "visible" 
 
        }); 
 
        }, 
 
        function(){ 
 
        \t //mouse leave 
 
        \t $("#blackbox").css({ \t \t \t 
 
         \t "visibility": "hidden" 
 
        \t }); 
 
      \t \t \t });

#text { 
 
    font-weight: 600; 
 
    font-size: 24px; 
 
} 
 
#blackbox { 
 
    visibility: hidden; 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px; 
 
}

<head> 
 
</head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h3><a href="#" id"text">Pasa el ratón:</a></h3> 
 
    <div id="blackbox"></div> 
 
</body>

Не working

Как сделать так, чтобы при прохождении мыши по ссылке изображение меняет цвет?

источник

2016-11-28 Isaac Palacio

** 1. ** Вам не хватает '#' в '$ (" # blackbox ")'. ** 2. ** Лучше добиться с помощью CSS. ** 3. ** Вы можете использовать 'hover()' jQuery, который ожидает две функции в качестве аргументов, одну для «mousein» и одну для «mouseout». – haim770

Почему бы не использовать ': hover' в CSS? .. – Roberrrt

@ haim770 $ ("# текст") mousein (функция() { $ ("# BLACKBOX") CSS (\t { \t \t \t \t "цвет фона": "желтый" \t \t \t}) ; }); $ ("# text"). Mouseout (function() { $ ("# blackbox").CSS (\t {\t \t \t \t \t "цвет фона": "черный" }); }); –

Попробуйте использовать .hover (handleIn, handleOut) вместо. Кроме того, будьте осторожны с селекторами jQuery.

$("#blackbox") подберет тег с id="blackbox"

$("blackbox") будет выбрать тег BlackBox

<blackbox></blackbox>

$("#text").hover(function() { 
 
    //mouse enter 
 
    $("#blackbox").css({ \t \t \t \t 
 
     "background-color": "yellow" 
 
    }); 
 
}, 
 
function() { 
 
    //mouse leave 
 
\t $("#blackbox").css({ \t \t \t \t \t 
 
     "background-color": "black" 
 
\t }); 
 
});

#text { 
 
    font-weight: 600; 
 
    font-size:24px; 
 
} 
 

 
#blackbox { 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px;  
 
}

<h3><a href="#" id="text">Pasa el ratón:</a></h3> 
 
    <div id="blackbox"></div>

источник

2016-11-28 14:15:25

спасибо !! Я изменил текст с помощью свойства: видимость, и он не работает :-( –

Предполагается, что он будет работать. https://jsfiddle.net/zo6wgdrg/ –

Пожалуйста, никогда не используйте if-else для mouseenter и mouseleave функциональность, у вас есть конкретные функции, чтобы сделать это:

$("#text").on("hover", function(e) { 
    //on entering 
    $("blackbox").css( {        
     "background-color": "yellow" 
    }); 
    //on leaving 
    $(this).mouseleave(function(){ 
     $("blackbox").css( {        
      "background-color": "black" 
     });  
    }); 
});

Я надеюсь, что это помогает

источник

2016-11-28 14:17:26 Learner

Хорошо, так что мы все знаем, что родительские селекторы не существует в CSS, однако, мы do имеют селектор sibling + в CSS, что намного проще, чем возврат к jQuery/JavaScript.

Учитывая следующий синтаксис HTML, мы можем создать парение с использованием чистого CSS:

#text { 
 
    font-weight: 600; 
 
    font-size:24px; 
 
} 
 

 
#blackbox { 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px;  
 
} 
 

 
#text:hover + #blackbox { 
 
\t background-color: #0FF; 
 
}

<h3 id="text"><a href="#">Pasa el ratón:</a></h3> 
 
<div id="blackbox"></div>

Я изменении размера id="text" к вашему h3 родительского элемента, потому что a не брата вашего #blackbox.

источник

2016-11-28 14:24:47 Roberrrt

Поведение немного меняется ... Если вы наведете справа от ** a **, срабатывает зависание. Это связано с тем, что ** h3 ** шире, чем ** a ** – vals

А, конечно, по-прежнему применяется стиль по умолчанию. – Roberrrt

hi @Roberrrt, с видимостью свойства : видно, он не работает –

Изменение стиля через зависание?

ответ

Смежные вопросы