JQuery - проблемы с отображением DIV
Я создаю что-то, что помогает переворачивать div при наведении курсора. я создал это. Но проблема в мобильном разрешении, флип должен происходить при нажатии, а не при наведении курсора. Это означает, что когда мы нажимаем на одну карту, она должна переворачиваться, и она должна переворачиваться на сторону по умолчанию только при повторном щелчке. Не тогда, когда мы нажимаем на другую карту.
Я добавил код ниже. Пожалуйста, просмотрите его для получения дополнительных разъяснений.
.nb-flip-container:hover .nb-flip-grid, .nb-flip-container.hover .nb-flip-grid {
transform: rotateY(180deg);
}
.nb-flip-container {
width: 100%;
height: auto;
display: block;
margin: 0 auto 30px;
perspective: 1000px;
cursor: default;
}
.nb-flip-grid {
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
}
.nb-flip-back {
background: #fff200;
padding:5px;
border-radius:8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
.nb-flip-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
transform: rotateY(180deg);
}
span {
display: block;
font-size: 10px;
font-weight: $tertiary-weight;
margin-bottom: 5px;
}
p {
margin-bottom: 5px;
line-height: 18px;
}
h3 {
margin-bottom: 0;
}<div class = "nb-flip-container">
<div class = "nb-flip-grid">
<div class = "nb-flip-front">
<img alt = "" src = "http://dev.netbramha.in/projects/flip-image/flip-image-21.png">
</div>
<div class = "nb-flip-back">
<span> User Interface </span>
<p> This is where the design becomes </p>
<h3> SEXY. </h3>
</div>
</div>
</div>
Привет, Джек Бэшфорд, я редактировал CSS.
Мы можем это сделать?
Прежде всего, вы должны поместить свой CSS-код в теги <style>. А вы знаете правило css @media? Он должен позаботиться об этой проблеме.
@ jack-bashford, я думаю, он может,
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это растение делает тебя счастливым?
<!-- -->
Прочтите вопрос, прежде чем размещать ответ. Он просит помощи с мобильным телефоном, а не с другой стороны.
Пожалуйста, просмотрите решение сейчас :)
И использование простого слова - приятное поведение
Объясните здесь свое решение, расскажите людям на веб-сайте, почему они должны щелкнуть ссылку, в которой просто написано «Образец ссылки». пожалуйста ... чувак
Помните, что есть много способов решить эту проблему, и мой - один из них. Как указано в заголовке, для решения разрешено использование jQuery.
Во-первых, мы чаще всего обнаруживаем, что находимся в мобильной среде или на рабочем столе (есть много способов сделать это), мы используем старое решение.
Код JS для обнаружения нашей работающей среды:
if ( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
$('body').addClass('mobile');
//if you have one element
$('.nb-flip-container').toggleClass('clicked');
//if you have multiple elements to preventing all elements be flipped
$('.nb-flip-container').on('click', function(){//or on touch
$(this).toggleClass('clicked');
});
}
else {
$('body').addClass('not-mobile');
}
CSS:
.not-mobile .nb-flip-container:hover .nb-flip-grid,
.nb-flip-container.hover .nb-flip-grid {
transform: rotateY(180deg);
}
.mobile .nb-flip-container.clicked .nb-flip-grid,
.nb-flip-container.clicked .nb-flip-grid {
transform: rotateY(180deg);
}
Объяснение: в js-коде мы определяем, мобильна наша среда или нет. Если это мобильный, добавьте новый класс в тело, а также добавьте новые функции в наш элемент для обнаружения события щелчка (или для лучшего решения касания). Когда произошло касание, добавьте к элементу новый класс, который соответствует эффекту наведения в режиме рабочего стола.
Вы не можете так вложить чистый CSS ...