изображение мигает при взаимодействии с другим элементом

Question

Итак, я создаю эту страницу, где есть 4 слайда изображений по ориентации 2x2. Теперь я все еще довольно новичок в html и css, поэтому я не уверен, какая часть моего кода вызывает это.

Css, который я использовал для ползунков, одинаковы, но ползунки справа продолжают мигать, когда я наводил на себя элемент. Вот страница, на которой я работаю http://website-testing.site88.net/Smile.html.

Пример кода ниже здесь:

<input type="radio" name="slide1" id="S1_I1" checked> 
    <input type="radio" name="slide1" id="S1_I2"> 
    <input type="radio" name="slide1" id="S1_I3"> 
    <input type="radio" name="slide1" id="S1_I4"> 

<ul id="container"> 
    <li class="left"> Placeholder 
     <div class="slides_container"> 
     <div class="slides"> 
     <ul> 
      <li><div class="img"> 
        <img src="pic/pic_1.jpeg"> 
       </div> 
       <div class="nav"> 
        <label for="S1_I2" class="next">&#x203a;</label> 
       </div> 
      </li> 
      <li><div class="img"> 
        <img src="pic/pic_2.jpg"> 
       </div> 
       <div class="nav"> 
        <label for="S1_I1" class="prev">&#x2039;</label> 
        <label for="S1_I3" class="next">&#x203a;</label> 
       </div> 
      </li> 
      <li><div class="img"> 
        <img src="pic/pic_3.jpg"> 
       </div> 
       <div class="nav"> 
        <label for="S1_I2" class="prev">&#x2039;</label> 
        <label for="S1_I4" class="next">&#x203a;</label> 
       </div> 
      </li> 
      <li><div class="img"> 
        <img src="pic/pic_2.jpg"> 
       </div> 
       <div class="nav"> 
        <label for="S1_I3" class="prev">&#x2039;</label> 
       </div> 
      </li> 
     </ul> 
     </div> 
     </div> 
    </li> 

Любые идеи, что могло бы вызвать это? Кроме того, это первый раз, когда я создал веб-сайт, так что она может выглядеть некрасиво на других браузерах, так как я не знаю, как заставить их выглядеть совместимы

Answer 1

Что вызывает именно этот кусок кода:

/* -webkit-columns: 2; */ 
-moz-columns: 2; 
-o-columns: 2; 
columns: 2; 

Вы можете найти его в своем smile.css по первой строке внутри файла.

Выньте его, и он больше не будет мигать. НО вам придется немного перемещать вещи, так как это слегка испортит позиционирование изображений. В любом случае, не используйте columns:2, и все должно быть в порядке.