2016-05-04 3 views
0

У меня возникла такая проблема, что, когда я наводил на элемент видео, я теряю css (меняется радиус границы). Tts в строке видео. Кто-нибудь из вас знает, что я могу сделать, чтобы исправить это? Вы можете видеть, что мой текущий сайт hereCss уходит, когда наведите указатель мыши

.gallery-image { 
    border-radius: 10px; 
    position: relative; 
    overflow: hidden; 
} 

<div class="large-3 columns"> 
    <div class="building-block-item"> 
     <div> 
      <a href="https://www.youtube.com/embed/o7rdAH8oifo?fs=1&amp;autoplay=1&amp;rel=0. " class="gallery-video" data-featherlight="" data-featherlight-type="iframe"> 
       <div class="gallery-image"> 
        <div class="gallery-veil"> 
         <h3>Høreprøve</h3> 
        </div> 
        <img src="assets/images/video/video.png?anchor=center&amp;mode=crop&amp;width=282&amp;height=190&amp;rnd=130965782700000000&amp;quality=90"> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 
+3

Просьба представить пример, иллюстрирующий проблему. Ссылка на вашу сторону - это плохой способ рекламы. – Justinas

+0

Его единственный пример, который я получил прямо сейчас. Вы можете попробовать пойти туда и посмотреть. –

+1

Попробуйте удалить переполнение: скрыто от .gallery-image class. –

ответ

3

ОБНОВЛЕНО это из-за transition поэтому, пожалуйста, удалите переход от .gallery-image img

Я проверил код и найденный путем удаления переливных ваш DIV будет выходить из границ (несколько пикселей), поэтому лучше всего удалить переход. Ваш класс будет выглядеть следующим образом:

.gallery-image img 
{ 
    width: 100% !important; 
    max-width: 100% !important; 
} 
+0

Можете ли вы рассказать мне, почему мое меню прыгает, когда я иду на другую страницу? –

+0

Вы говорите о меню 1 меню 2, которое прыгает в течение 2 секунд? –

+0

Да. Я не знаю, почему .. И когда вы наводите курсор на тег, белый цвет, который он должен иметь, получает некоторую непрозрачность, я думаю. Но я ничего не могу найти, и я не помню, чтобы я дал ему что-нибудь. –

-1

Вы применили эффект перехода в CSS

.gallery-image img { 
width: 100%!important; 
max-width: none; 
transition: .4s ; 
} 

изменить его к следующему

.gallery-image img { 
width: 100%!important; 
max-width: none; 
transition: transform .4s; 
} 

Это позволит решить проблему

+0

Это удаляет анимированный переход – Nate

+0

Это связано с тем, что вы применили переход на '.gallery-image img', чтобы изменить его на' .gallery-image img: hover'. Он будет работать правильно. –

+0

Но это причина его возникновения. – Jaison

0

I подумайте, что точное решение - уменьшить или удалить эффект перехода css из тега img.

Использование

.gallery-image img { 
    width: 100%!important; 
    max-width: none; 
} 

вместо

.gallery-image img { 
    width: 100%!important; 
    max-width: none; 
    transition: .4s; 
} 
Смежные вопросы