CSS 너비 전환 및 호버

Question

CSS가있는 메뉴와 같은 슬라이드 쇼를 구현하려고합니다. 전환을 제외하고는 정상적으로 작동합니다. 전환이 사용되면 요소가 더 이상 동기화되지 않습니다. 짧은 시간에 여러 요소를 올리면 전체 메뉴 폭이 줄어 듭니다. 전환이 제거되면 모든 것이 잘 작동합니다.

CSS 전환과 함께 사용할 때주의해야 할 점이 있습니까? 나는 transition-timing-function: linear;이 동기화에서 너비를 얻기에 충분하다고 생각했습니다. 그것은 전이가 요소에서 페이딩보다 페이딩 아웃 요소에서 일찍 시작되는 것처럼 보입니다. 구현에 대한

일부 기술 정보 :

그것은 ul 목록입니다. 메뉴 항목은 li으로 표시됩니다. 선택한 메뉴 항목의 값은 selected입니다. 사용자 상호 작용이없는 경우이 메시지가 표시됩니다. 다른 것들은 쓰러졌습니다. 엘레멘트를 올리면 열리 며 다른 엘레멘트는 모두 닫힙니다. 접힌 상태에서 표시 상태로 변경하면 전환 효과가 있어야합니다.

ul { 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 0; 
 
    /* 
 
    * remove gaps between inline elements 
 
    * https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 
 
    */ 
 
    font-size: 0; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    /* 
 
    * Transition 
 
    */ 
 
    transition: width 0.5s; 
 
    transition-timing-function: linear; 
 
    width: 50px; 
 
} 
 
ul li:hover, 
 
ul li.selected, 
 
ul:hover li.selected:hover { 
 
    width: 564px; 
 
} 
 
ul:hover li.selected { 
 
    width: 50px; 
 
}

<ul> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/profil.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_profil.jpg" alt="Unser Profil"> 
 
    </a> 
 
    </li> 
 
    <li class="selected"> 
 
    <a href="http://www.3ker-ras-group.com/referenzen.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_referenzen_der_3ker_ras_group.jpg" alt="Referenzen der 3KER RAS GROUP"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/jobs.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_hoehenarbeiter_jobs.jpg" alt="Jobs für Höhenarbeiter"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/shop-kletterbedarf.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_kletterbedarf_shop.jpg" alt="Unser Shop für Kletterbedarf"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/kontakt.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_kontakt_zum_unternehmen.jpg" alt="Kontakt aufnehmen"> 
 
    </a> 
 
    </li> 
 
</ul>

트리거 왼쪽에서 오른쪽으로 빠르게 커서를 이동하여 문제를 해결합니다. 적어도 Firefox와 Chrome에서는 발생합니다. 사파리, IE 및 가장자리를 테스트하지 않았습니다.

다음은 JSFiddle입니다. https://jsfiddle.net/vj12qswz/3/ 모든 요소는 한 줄에 들어가야합니다. 필요한 경우 미리보기 창 너비를 조정하십시오.

Answer 1

javascript를 사용하여 마우스를 올리면 특정 클래스를 추가하면 올바르게 작동합니다.

"onclick"이벤트를 추가하는 것이 가장 좋을 것입니다. 터치 장치에서 마우스를 올리면 움직이지 않을 것입니다.