이 fiddle에있는 상자 중 하나를 클릭하면 호버립 상태가 비활성 상태가되어 다시 표시되지 않습니다.클릭 후 CSS HOUR 상태가 비활성 상태가됩니다.
나는 css background-image을 사용하여 배경이 설정된 세 개의 상자가 있습니다. jQuery를 사용하여 클릭 이벤트를 첨부하고 있습니다. 호버 상태가 작동을 중지하는 이유를 파악하는 데 도움을 줄 수 있습니까?
감사합니다.
li의 인라인 스타일이 css : hover 선택기 속성을 덮어 씁니다. 사용 !important는 그것이 작동되도록하기 :
li#one:hover{
background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important;
}
작동하지 않았다. 클릭 한 상태는 mouseout에서만 표시됩니다. 우리가 이미지를 클릭 한 후에 보여지기로되어 있습니다. 어떤 생각? 감사. – user2432458
이미지를 사용하기 때문에 텍스트를 사용하고 마우스 오버 및 활성 상태에서 색상 및 여백으로 속성을 변경하십시오. 이 방법이 더 좋을 것입니다. – Michael
를 jQuery를 배경 이미지를 변경하면, 실제 HTML을 수정에로, 그래서 inline 않습니다. 즉, 새 배경 이미지가 #one:hover에 설정된 것보다 많을 경우 specific이므로 다시 정의 할 수 없습니다.
각 새 배경 이미지를 :hover에 추가 한 후에는 !important을 추가해야 덮어 쓰기 할 수 있습니다.
그리고 이것이 CSS 값을 직접 설정하지 않는 것이 일반적으로 더 똑똑하지만 대신 클래스를 사용하는 이유입니다. 또한 논리와 서식의 분리를 돕습니다. – CBroe
@andy 각 이미지에는 3 가지 조건이 있습니다. 유휴 상태이고 마우스를 올리면 클릭됩니다. css에! important를 추가하면 클릭 한 상태는 mouseout에서만 표시됩니다. 이미지를 클릭하자마자 바로 표시되기를 바랍니다. 이것을 해결하는 다른 아이디어? 덕분에 덕분에 – user2432458
@ user2432458 그럼 내가 제안하는 것은 매번 요소의 이미지를 변경하는 대신'background-image : url()'을 가진'.clicked'와 같은 클래스를 추가하고 제거하는 것입니다. – Andy
당신이 jQuery로 CSS 속성을 사용하여 배경 인라인을 설정했기 때문에 당신이했다 얻고 있었다 문제, 내가 문제를 해결하는 데모를 만들었습니다.
나는 배경을 삽입 한 코드의 일부를 제거하고 바로 요소의 사용자 클릭, 난 요소에 클래스를 설정 이렇게하면 코드에.active 클래스를 추가했다. 나는 당신이 즐겁게되기를 바랍니다!
@ Wallysson 너스. 답변 해주셔서 감사합니다. 클릭 한 상태의 이미지를 어떻게 표시합니까? 우리가 클릭 한 후 바닥에 있어야하는 번호. – user2432458
그게 문제가 아니에요, 내가 코드를 변경했습니다, 여기에 새로운 예제가 있습니다 : http://jsfiddle.net/J3x7M/5/ 내가했던 기본적인 것은 새로운 클래스에 .class를 나누었습니다. , 하단 번호와 함께. 희망 그 도움 ... :) –
@ Wallysson Nunes. 감사합니다. 얼마나 위대하고 간단한 스크립트. – user2432458
왜 이미지를 클릭 한 후 마우스를 가져 가면 상태가 비활성 상태가됩니다. >> >> 왜 같은 요소에 대해 두 번의 클릭 이벤트가 발생합니까? – bipen
호버가 뒤집히면 아무 것도 발생하지 않습니다. 너 무슨 뜻이야? –
@bipen 두 번의 클릭 이벤트를 병합하는 방법을 모른다. – user2432458