클릭하면 변경하려는 이미지 요소가 있습니다.

<img id="btnLeft">

이것은 작동합니다 :

#btnLeft:hover {
    width:70px;
    height:74px;
}

그러나 내가 필요한 것은 다음과 같습니다.

#btnLeft:onclick {
    width:70px;
    height:74px;
}

그러나 분명히 작동하지 않습니다. onclickCSS에서 작동 할 수 있습니까 (예 : JavaScript를 사용하지 않는 것)?

가장 가까운 것은 :active다음과 같습니다.

#btnLeft:active {
    width: 70px;
    height: 74px;
}

그러나 이것은 마우스 버튼을 누르고있을 때만 스타일을 적용합니다. 스타일을 적용하고 클릭시 적용된 상태를 유지 하는 유일한 방법 은 약간의 JavaScript를 사용하는 것입니다.

2019 년 기준 답변 :

가장 좋은 방법은 (실제로 유일한 방법 *)는 실제 시뮬레이션 클릭 (단지 요소를 유혹하거나하지 않는 경우, 요소가 활동하기보다는 단지 CSS를 사용하여 이벤트 와 mouseUp 체크 박스 해킹을 사용하는 것입니다). 레이블의 속성을 통해 요소에 a label를 첨부하여 작동 합니다.<input type="checkbox">for=""

이 기능은 광범위한 브라우저를 지원합니다 ( :checked의사 클래스는 IE9 +입니다).

에 같은 값을 적용 <input>의 ID 속성과 동반 <label>의 for=""속성, 당신은와 클릭의 라벨 리 · 스타일로 브라우저 말할 수있는 :checked의사 클래스는, 사실 덕분에 라벨을 클릭하면 확인할 것을하고 선택을 취소합니다 "관련된" <input type="checkbox">.

* IE7 +의 의사 클래스 :active또는 :focus의사 클래스 를 통해 "선택된"이벤트를 시뮬레이션 할 수 있습니다 (예 : 일반적으로 50px넓은 버튼 의 경우 너비를 변경할 수 있음 :) active. #btnControl:active { width: 75px; }그러나 실제 "클릭"이벤트는 아닙니다. 요소가 선택 될 때마다 (예 : Tab키보드 로 빙하는 등) "실제" 이며, 실제 클릭 이벤트와는 약간 다르며 일반적으로 동작을 실행합니다 mouseUp.

확인란 해킹의 기본 데모 (요청하는 기본 코드 구조) :

label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}

<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>

여기에 마크 업 입력 직후 레이블을 배치했습니다. 이것은 내가 사용할 수 있도록 인접한 형제 선택기 ( +키)를 사용하여 내 #demo확인란 바로 뒤에있는 레이블 만 선택할 수 있습니다. :checked의사 클래스가 확인란에 적용 되므로#demo:checked + label 확인란을 선택하는 경우에만 적용됩니다.

클릭시 이미지 크기를 조정하는 데모는 다음과 같습니다.

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>

그 존재가 말한다면, 거기 이다 나쁜 소식. 라벨은 한 번에 하나의 양식 컨트롤 연결할 수 있으므로 <label></label>태그 안에 버튼을 놓아 하루 만 호출하면 안됩니다 . 그러나 우리 는 할 수 있습니다 레이블 보이게하는 방법과 HTML 버튼의 모양과 동작합니다에 비슷한 행동하는 일부 CSS를 사용합니다.

원하는 것 이상으로 버튼 클릭 효과를 모방하는 데모 :

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}


.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    -moz-outline-radius: 5px;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

이 데모에서 CSS의 대부분은 레이블 요소를 스타일링하기위한 것입니다. 실제로 버튼 이 필요하지 않은 경우 없고 오래된 요소로 충분하다면 위의 두 번째 데모와 마찬가지로이 데모에서 거의 모든 스타일을 제거 할 수 있습니다.

또한 거기에 접두사 속성이 하나 있음을 알 수 있습니다 -moz-outline-radius. 얼마 전 모질라는이 비 특정 속성을 Firefox에 추가했지만, WebKit의 사람들은 불행히도 추가하지 않을 것이라고 결정했습니다 . 따라서이 CSS 라인은 Firefox를 사용하는 사람들을위한 점진적인 향상이라고 생각하십시오.

의사 클래스 :target를 사용 하여 클릭 이벤트를 모방 할 수 있습니다 . 예를 들어 보겠습니다.

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

다음과 같은 모습입니다 : http://jsfiddle.net/TYhnb/

참고로, 이것은 하이퍼 링크로만 제한되므로 단추와 같은 하이퍼 링크 이외의 다른 장치에서 사용해야하는 경우 단추처럼 보이도록 하이퍼 링크 스타일을 지정하는 등 약간의 해킹을 원할 수 있습니다.

요소를 제공 tabindex하면:focus 의사 클래스를 사용하여 클릭을 시뮬레이션 .

HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

CSS

#btnLeft:focus{
    width:70px;
    height:74px;
}

http://jsfiddle.net/NaTj5/

편집 : OP가 자신이 원하는 것을 명확하게하기 전에 대답했습니다. 다음은 :active의사 클래스가 아닌 javascripts onclick과 유사한 onclick에 대한 것 입니다.

이것은 Javascript 또는 Checkbox Hack 중 하나를 통해서만 달성 할 수 있습니다.

확인란 해킹은 기본적으로 레이블을 클릭하여 확인란을 "확인"하여 원하는대로 레이블의 스타일을 지정할 수 있습니다.

데모

TylerH 는 정말 좋은 답변을했으며 마지막 버튼 버전을 업데이트해야했습니다.

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 30px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:30px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

해키되지 않은 순수한 CSS 솔루션은 어떻습니까?

.page {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #121519;
  color: whitesmoke;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.arrow {
  cursor: pointer;
  transition: filter 0.3s ease 0.3s;
}

.arrow:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}

<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

@TylerH는 큰 반응을 보였지만 매우 복잡한 솔루션입니다. 추가 요소가없는 순수한 CSS로 간단한 "클릭시"효과를 원하는 솔루션이 있습니다.

우리는 단순히 CSS 전환을 사용할 것입니다. 애니메이션과 비슷한 작업을 수행 할 수 있습니다.

트릭은 사용자가 클릭 할 때 지속되도록 전환 지연을 변경하는 것입니다.

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

여기에 "clicked"클래스도 추가하여 자바 스크립트가 필요한 경우 효과를 제공 할 수도 있습니다. 필자는 0px 드롭 섀도 필터를 사용하여 주어진 투명 그래픽을 파란색으로 강조 표시합니다.

여기에 0의 필터가있어 효과가 없습니다. 효과가 해제되면 지연된 전환을 추가하여 멋진 "클릭"효과를 제공 할 수 있습니다.

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

이를 통해 사용자가 버튼을 클릭 할 때 파란색으로 강조 표시되고 천천히 희미 해집니다 (물론 다른 효과도 사용할 수 있음).

강조 표시 할 애니메이션이 즉각적이라는 의미로 제한되어 있지만 여전히 원하는 효과를 제공합니다. 애니메이션과 함께이 트릭을 사용하여보다 부드러운 전체 전환을 생성 할 수 있습니다.

좋아, 이것은 오래된 게시물 일 것입니다 ...하지만 구글에서 처음으로 결과와 같이 자신의 믹스를 결정했습니다 ..

먼저 나는 초점을 사용할 것이다

그 이유는 내가 보여주는 예제에서 잘 작동하기 때문입니다. 누군가 마우스 다운 타입 이벤트를 원하면 활성 을 사용하십시오.

HTML 코드 :

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

CSS 코드 :

/* Change Button Size/Border/BG Color And Align To Middle */
    .mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

JS FIDDLE 링크 : http://jsfiddle.net/00wwkjux/

그래서 왜 오래된 스레드에 이것을 게시하고 있습니까? 여기의 예제가 다양하고 커뮤니티에 하나의 예제를 제공하는 것이 좋습니다.

스레드 제작자가 이미 대답했듯이 클릭 이벤트 중에 만 효과가 지속되기를 원합니다. 이제 이것이 그 요구에 맞지는 않지만 그와 비슷합니다. 마우스가 다운 된 상태에서 active가 활성화되고 더 오래 지속해야하는 변경 사항은 javascript로 수행해야합니다.

경고! 아래에서 특히 간단한 답변! :)

당신은 실제로 수 의 변화가 그이 지속 (예 : 블록 / 팝업 등이 표시되고 클릭 후 보이는 숙박)와 만 CSS (그리고 체크 박스 해킹 사용하지 않고) 오래 같이 (그렇지 않으면 올바른)의 대부분이 여기에 주장에 응답 무엇에도 불구을 호버링 중에는 지속성이 필요합니다.

따라서 Bojangles와 TylerH의 답변을 살펴보십시오. 단, CSS를 클릭하면 블록을 클릭 한 후에도 표시 할 수있는 간단한 대답 만 원한다면 (그리고 후속 클릭으로 블록이 사라질 수도 있습니다) 이 솔루션을 참조하십시오.

비슷한 상황이 있었는데 onClick을 사용하여 JS를 추가하거나 마크 업 / HTML (정말 CSS 솔루션)을 변경할 수없는 팝업 div가 필요했으며 몇 가지주의 사항이있을 수 있습니다. HTML을 변경하여 ( 'id'를 추가 할 수 있도록) 변경할 수 없다면 멋진 팝업을 만들 수있는 : target 트릭을 사용할 수 없습니다.

필자의 경우 팝업 div가 다른 div 안에 포함되어 있고 팝업이 다른 div 위에 나타나기를 원했으며 이는 : active와 : hover의 조합을 사용하여 수행 할 수 있습니다.

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

예를 들면 다음과 같습니다 (팝업을 클릭하여 사라지도록하는 팝업).

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

아래에 코드 스 니펫 예제를 삽입했지만 stackoverflow 샌드 박스의 위치가 이상하므로 innerDiv 뒤에 '여기를 클릭하십시오'텍스트를 넣어야했지만 일반적으로 필요하지 않습니다.

/* Outer div - needs to be relative so we can use absolute positioning */
	.clickToShowInfo {
		position: relative;
	}
	/* When clicking outer div, make inner div visible */
	.clickToShowInfo:active .info { visibility: visible; }
	/* And hold by staying visible on hover */
	.info:hover {
		visibility: visible;
	}
	/* General settings for popup */
	.info {
		position: absolute;
		top: -10;
		visibility: hidden;
		z-index: 100;
		background-color: white;
		box-shadow: 5px 5px 2px #aaa;
		border: 1px solid grey;
		padding: 8px;
		width: 220px;
		height: 200px;
	}
	/* If we want clicking on the popup to close, use this */
	.info:active {
		visibility: hidden;	/* Doesn't work because DCEvent is :active as well */
		height: 0px;
		width: 0px;
		left: -1000px;
		top: -1000px;
	}

<p />
<div class="clickToShowInfo">
	<div class="info">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
	</div>
	Click here to show info
</div>
<p />

마우스 호버 및 마우스 클릭에 대한 아래 코드가 있으며 작동합니다.

//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    text-align:center;
    vertical-align:middle;
    height: 70%;
    width: 80%;
    top:auto;
    left: 10%;
}

이 코드는 이미지를 클릭하면 숨겨집니다.

.thumbnail:active span {
    visibility: hidden;
}

마우스를 가져 가면 빨간색으로 표시되고 클릭하면 파란색으로 표시되어야하는 요소에 문제가 있습니다. CSS로 이것을 달성하려면 다음이 필요합니다.

h1:hover { color: red; } 
h1:active { color: blue; }

<h1>This is a heading.</h1>

CSS 선택기 의 순서 가 내가 겪고 있는 문제라는 것을 알기 전까지 한동안 고투했습니다 . 문제는 장소를 바꾸었고 활성 선택기가 작동하지 않는다는 것입니다. 그리고 나서 :hover먼저 가야 한다는 것을 알았습니다 :active.

사용할 수 있습니다 : target

일반 목표

:표적

또는 클래스 이름으로 필터링

.classname : 대상

또는 ID 이름으로 필터링

#idname : 대상

<style>

#id01:target {      
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.msg{
    display:none;
}

.close{     
    color:white;        
    width: 2rem;
    height: 2rem;
    background-color: black;
    text-align:center;
    margin:20px;
}

</style>


<a href="#id01">Open</a>

<div id="id01" class="msg">    
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>