다른 요소와 상호 작용할 때 이미지 깜박임

2x2 방향으로 4 개의 이미지 슬라이드가있는이 페이지를 만듭니다. 지금은 여전히 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>

이의 원인이 수 있는지 어떤 아이디어? 는 또한이 내가 웹 사이트를 만든 것은 이번이 처음이다, 그래서 그들을 보이게하는 방법을 잘 모르겠어요 이후는, 다른 브라우저에 추한 보일 수 호환

무엇을 일으키는 것은이 코드 조각이다

출처

2015-01-25 Kerezeb

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

은

smile.css에서 파일의 첫 번째 줄에 있습니다.

꺼내어 더 이상 깜박 거리지 않습니다. 하지만 이미지 위치를 약간 엉망으로 만들므로 조금 움직여야 할 것입니다. 어쨌든 columns:2을 사용하지 마십시오.

출처

2015-01-25 04:41:12 Brain

감사합니다. 문제를 파악하려고했지만 2x2 그리드에서 어떻게 만들어야합니까? – Kerezeb

글쎄, 솔직히 html은 정말 지저분하고 잘 코딩되어 있지 않습니다. 또한 웹 사이트가 완전히 반응하지 않는 것으로 나타났습니다. 그래서 당신의 목적이 배우는 것이라면, 내가 당신이라면, 당신이하려는 일을 단순화하기위한 바이올린을 만드는 것으로 시작할 것입니다. 여기 피들을 만들 수 있습니다 : fiddle.jshell.net 왼쪽에는 CSS가 있고 HTML은 상자가 있습니다. 상자를 만들고 두 개의 열 (왼쪽과 오른쪽 중 하나)을 상자 안에 넣으십시오. 그런 다음 이미지 나 그 밖의 내용을 해당 열 안에 넣으십시오. 나는 이것이 좋은 출발이라고 말한다! – Brain

다른 요소와 상호 작용할 때 이미지 깜박임

답변

관련 문제