Скрыть div при вводе мыши, но оставить его
У меня есть два элемента div: при вводе мышью элемент divA должен исчезнуть, а элемент divB должен появиться. Когда мышь оставляет divB, divA должен отображаться снова, а divB исчезает. Я использовал этот код для достижения этого:
$("#divA").on("mouseenter", function() {
$("#divA").hide();
$("#divB").show();
});
$("#divB").on("mouseleave", function() {
$("#divA").show();
$("#divB").hide();
});`
Единственная проблема заключается в том, что когда divA прячется, другой div (который раньше сидел под ним) занимает его место… Итак, вопрос в том, есть ли способ позволить divA исчезнуть визуально, но не «физически»? Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Посмотрите этот ответ, чтобы узнать больше о различиях между display, visiblility и opacity. В ссылке вы ищете те, которые отмечены галочкой под occupies space.
По сути, вы хотите установить его свойство css
element.hidden {
opacity: 0;
}
который визуально скрывает элемент, но с ним все еще можно взаимодействовать.
Я думаю, вы хотите что-то, связанное со свойством css под названием visibility. Это свойство скрывает элемент, но «держит его там».
https://www.w3schools.com/CSSref/pr_class_visibility.asp
И похоже, вы используете jQuery. Поэтому я немного поискал и нашел этот ответ, который точно объясняет, как изменить видимость элемента с помощью jQuery.
https://stackoverflow.com/a/9614662/2250437
Может быть полезно для вас.
Вместо hide() и show() попробуйте установить свойство CSS visibility, как показано ниже:
$("#divA").on("mouseenter", function() {
$("#divA").css('visibility', 'hidden');
$("#divB").css('visibility', 'visible');
});
$("#divB").on("mouseleave", function() {
$("#divA").css('visibility', 'visible');
$("#divB").css('visibility', 'hidden');
});
Вместо использования свойства display попробуйте сделать это с помощью свойства opacity:
$("#divA").on("mouseenter", function() {
$("#divA").css("opacity", 0);
$("#divB").css("opacity", 1);
});
$("#divB").on("mouseleave", function() {
$("#divA").css("opacity", 1);
$("#divB").css("opacity", 0);
});
Благодаря тонну! При использовании $("#divA").css({"opacity":"0"}) и $("#divA").css({"opacity":"1"}) это работает!