맞춤 CSS 이미지 마우스 오버 상태

약간의 문제가 발생했습니다. 나는 사용자 정의 목록 항목에 대한 일부 이미지 호버 상태를 만든 메뉴 목록이 있습니다. 이것은 메뉴 항목 (목록 항목 텍스트 길이 등)을 변경해야 할 때까지 완벽하게 작동했습니다. 나는 돌아가서 무엇인가가 바뀔 때마다 모든 이미지를 다시 만들어야한다.맞춤 CSS 이미지 마우스 오버 상태

enter image description here

는 기본적으로 가져가 빨간색 배경과 그 적색 영역의 중복 회전 ~ 2 개도 및 추가 : 여기

내가 달성하기 위해 노력하고있어 일부 이미지입니다 더 밝은 색입니다. CSS를 통해 :after과 transform: rotate()으로이 작업을 수행 할 수 있습니까? 그렇지 않은 경우 다양한 단어 길이에 대해이 효과를 얻는 좋은 방법은 무엇입니까?

미리 감사드립니다.

tre

출처

2012-08-13 tr3online

이렇게하면 쉽게 변환 할 수 있습니다.

<div class="menu-button"> 
    <div class="text">Screenings</div> 
    <div class="hover-bg"></div> 
</div>

그리고 스타일이 같은 .hover-bg 클래스 뭔가 :

#menu .menu-button:hover .hover-bg 
{ 
    z-index: 1; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(220, 50, 50, 0.4); 
    transform: rotate(2deg) scale(1.05, 1); 
    transform-origin: center right; 
}

Here's an example on JSFiddle

당신은 비록 각각의 버튼에 두 개의 요소, 텍스트의 하나는 왜곡 된 배경을 가지고해야합니다

Here's an example where I had some fun with transitions. 게으름 때문에 나는 Chrome과 Webkit을 의미하는 Webkit에서 작동하도록 고민했습니다. 브라우저 간 호환성을 위해 당신이 (-webkit-, -moz- 등)

출처

2012-08-13 20:46:33 Hubro

이것은 정확히 내가 원했던 것입니다. 나는 Wordpress를 사용하고 있기 때문에 jQuery를 사용하여이 효과를 얻기 위해 목록 항목 안에 hover-bg div를 삽입했습니다. 무리 감사. – tr3online

그러나, 내가 .hoverbg의 맨 위로 마우스를 가져 가면 내 예제에서 링크가 아닌 뒤로 회전 된 div가 활성화됩니다. http://jsfiddle.net/heHY9/ , 만일 당신이 그것을 볼 수 있으면 너무 많이, 그것은 매우 인정 될 것이다. 고마워 – tr3online

그 이유는 링크 자체에 마우스를 올리면 마우스가 링크를 떠나는 순간 마우스가 여전히 기술적으로 목록 항목 위에 있더라도 빨간색 배경이 사라지게된다는 것입니다. 호버 의사 클래스를 목록 항목으로 이동하면 예상대로 작동합니다. http://jsfiddle.net/heHY9/2/ – Hubro

이 순수 CSS에서 수행 할 수있는 벤더 고유의 속성 접두사가 필요합니다

주 (조차 3).

호버가 기울어 진 배경 이미지가있는 경우 왼쪽 및 위쪽으로 몇 픽셀을 배치하고 배경색을 추가하십시오.

배경 색상, 당신은 이미지의 일부만을 볼 수 있기 때문에 :

<div class="text">Screenings</div> 

.text { 
    color: #000; 
    margin-left: 5px;/*to make room for the hover image */ 
    padding: 4px; 
} 
.text:hover { 
    background: #900 url(tiltedimage.png) no-repeat -5px -5px; 
    color: #fff; 
}

이 당신이 솔루션을 가리 킵니다.

출처

2012-08-13 21:56:15 Mark

맞춤 CSS 이미지 마우스 오버 상태

답변

관련 문제