Mouseenter & Mouseleave to Click

У меня есть страницы iframe, которые появляются при наведении курсора. Я хочу изменить это, чтобы щелкнуть. Как-то это не работает.Mouseenter & Mouseleave to Click

JS:

$('section div').mouseenter(function(){ 
    $(this).css('height', '80vh'); 
    $(this).css('width', '100%'); 
    $('#info').css('width', '100%'); 
}); 

$('section div').mouseleave(function(){ 
    $(this).css('height', '2.5vh'); 
    $(this).css('width', '100%'); 
    $('#info').css('width', '100%'); 
});

CSS:

iframe { 
    border: 0; 
    width: 100%; 
    height: 100%; 
    transition: 1s; 
    z-index: 2000; 
} 

#info { 
    position: fixed; 
    top: 0; 
    height: 80vh; 
    width: 100%; 
    transition: 1s; 
    z-index: 1; 
} 

section { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    z-index: 2000; 
}

HTML:

<body> 
    <section></section> 
</body>

Когда-нибудь моя проба работал, но только на самом (пустой) IFRAME, поэтому ничего не происходит когда iframe заполнен содержимым, возможно, это только проблема цели.

источник

2016-12-11 73A

Где ваш 'click' код? – Xufox

Код клика, который я сделал, не работает вообще. Вот что я хочу достичь при щелчке, а не в mouseenter и mouseleave: jsfiddle.net/T73A/tsq8h6pc – 73A

Нерабочий код должен быть в самом вопросе. – Xufox

Я не совсем понимаю ваш вопрос, и ваш код click отсутствует. Из того, что я с трудом понимаю, вы могли бы achive это с этим кодом:

$('section div').click(function() { 
 
    // This part is not really needed 
 
    if (this.state === undefined) { 
 
    this.state = 0; 
 
    } 
 
    // end of not needed part 
 
    if (this.state) { 
 
    $(this).css('height', '2.5vh'); 
 
    $(this).css('width', '100%'); 
 
    $('#info').css('width', '100%'); 
 
    this.state = 0; 
 
    } else { 
 
    $(this).css('height', '80vh'); 
 
    $(this).css('width', '100%'); 
 
    $('#info').css('width', '100%'); 
 
    this.state = 1; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
    section { 
 
    margin: 10px; 
 
    } 
 
</style> 
 
<div> 
 
    <section> 
 
    <div style="background-color: red; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: green; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: blue; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: black; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
</div>

источник

2016-12-11 11:13:44 Device

Вот что я хочу достичь, щелкнув мышью, а не mouseenter и mouseleave: https://jsfiddle.net/T73A/tsq8h6pc/ – 73A

Я вижу, что происходит, у div есть wierd hitbox, дайте мне 10 минут – Device

Итак, ошибка одинакова, у div есть wierd hitbox. Единственным обходным решением, которое я могу видеть, является создание div обработчика, вызывающего событие click. – Device

ответ

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