Наведите изображения на мобильное устройство - PullRequest
Новая
       96

Наведите изображения на мобильное устройство

0 голосов
/ 28 мая 2020

У меня есть функция наведения изображения на моем веб-сайте, созданная с помощью CAR GO Collective. Я добавил функцию наведения на CSS, которая отлично работает, однако эти изображения при наведении не отображаются на мобильных устройствах. У меня вопрос: как добавить к CSS, чтобы сделать их доступными для ссылок на изображения на мобильных устройствах, но при наведении курсора на настольную версию?

Вот где на сайте появляется курсор CSS: 

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}
.hover-title {
color: #FFB000;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    visibility: hidden;
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:5;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Это также упоминается в http://www.w3schools.com/cssref/sel_active.asp; вы можете добиться того, чего хотите (нажмите на мобильном телефоне, наведите курсор на рабочий стол), если вы упомянули селектор :active перед наведением :selector

0 голосов
/ 28 мая 2020

visibility: hidden; скроет изображения, если вы не отобразите их с большей точностью. Поскольку вы хотите, чтобы изображения отображались как на мобильном устройстве, так и на компьютере (но с разным стилем), избавьтесь от свойств visibility и используйте медиа-запрос , чтобы изменить стиль между настольным компьютером и мобильным устройством.

...