#javascript #jquery #mouseenter
#javascript #jquery #mouseenter
Вопрос:
Я пытаюсь создать div. при наведении на нее курсора мыши (я использую mouseenter и mouseleave функцию jquery) div изменяет свой размер, и при нажатии на него должен отображаться другой div. для этого я использую click функцию. какое-то время это работает, а какое-то время нет. вот мой код jquery.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
$('.box').click(function(e) {
e.preventDefault();
console.log('clicked');
$('.box2').css('display', 'block');
});
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
}); // End of document ready function body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div> Ответ №1:
Вы связываете привязку нескольких событий. в вашем коде каждый раз, когда запускается mouseenter, к событию click добавляется новый обратный вызов.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
$('.box').click(function(e) {
e.preventDefault();
if($('.box2').css('display') === 'block'){
$('.box2').css('display', 'none');
} else {
$('.box2').css('display', 'block');
}
});
}); // End of document ready function body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div> Комментарии:
1. Спасибо! но как я могу это решить. также нужна эта функциональность. Что я пытаюсь сделать, так это «при наведении курсора мыши на поле оно будет масштабироваться (размер шрифта увеличивается), и когда кто-то нажимает на него, появляется новый div (второе поле), при повторном нажатии на поле новый div (второе поле) исчезает.
2. Проблема решена. Я разделяю mouseenter и функцию click, и теперь она работает нормально. Спасибо.