CSS에서 온클릭 효과를 얻을 수 있습니까?
클릭하면 변경할 이미지 요소가 있습니다.
<img id="btnLeft">
효과:
#btnLeft:hover {
width: 70px;
height: 74px;
}
하지만 내가 필요한 것은:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
하지만, 그것은 분명히 효과가 없습니다.그것을 갖는 것이 가능합니까?onclickCSS에서의 동작(즉, 자바스크립트를 사용하지 않음)?
CSS만을 사용하여 실제 클릭 이벤트를 시뮬레이션하는 가장 좋은 방법(실제로 유일한 방법*)은 확인란 해킹을 사용하는 것입니다.라벨을 통해 요소에 를 부착하여 작동합니다.for=""기여하다.
이 기능은 광범위한 브라우저 지원(:checked유사 클래스는 IE9+)입니다.
을 일한값에 합니다.<input> 제공되는 "ID 속과수는되<label>의for=""속성, 그리고 당신은 라벨을 클릭하면 "관련"을 확인하고 선택 취소하기 때문에 브라우저에게 클릭 시 라벨을 유사 클래스로 다시 스타일을 지정하도록 말할 수 있습니다.<input type="checkbox">.
는 "된" 이벤트를 통해 할 수 .:active또는:focusIE7 일반적으로▁that)50px와이드, 당신은 그것의 폭을 바꿀 수 있습니다.active:#btnControl:active { width: 75px; }), 그러나 이러한 이벤트는 실제 "클릭" 이벤트가 아닙니다.요소가 선택된 전체 시간 동안(예: 키보드를 사용하여 빙글빙글) 활성화됩니다. 이는 일반적으로 -에 대해 작업을 실행하는 실제 클릭 이벤트와는 조금 다릅니다.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="https://placekitten.com/200/140" id="btnLeft" /></label>그 말이 나온 김에, 나쁜 소식이 있습니다.레이블은 한 번에 하나의 양식 컨트롤에만 연결될 수 있으므로, 이는 레이블 내부에 단추를 놓을 수 없음을 의미합니다.<label></label>꼬리표를 달고 오늘을 마칩니다.그러나 일부 CSS를 사용하여 레이블을 HTML 단추의 모양과 동작에 매우 가깝게 보이도록 하고 동작할 수 있습니다.
버튼 클릭 효과를 따라하는 데모를 요청한 내용 이상으로 수행할 수 있습니다.
#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;
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는 레이블 요소를 스타일링하기 위한 것입니다.실제로 버튼이 필요하지 않고 오래된 요소만 있으면 충분하다면 위의 두 번째 데모와 유사하게 이 데모에서 거의 모든 스타일을 제거할 수 있습니다.
가장 가까운 값은 다음과 같습니다.
#btnLeft:active {
width: 70px;
height: 74px;
}
그러나 마우스 버튼을 누른 상태에서만 스타일이 적용됩니다.스타일을 적용하고 클릭할 때 계속 적용할 수 있는 유일한 방법은 자바스크립트를 조금 사용하는 것입니다.
클래스 유클를사수있용다습니할스를 할 수 .:target클릭 시 이벤트를 모방합니다.예를 하나 들어보죠.
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>http://jsfiddle.net/TYhnb/ 은 다음과 같습니다.
한 가지 주의할 점은 이 기능은 하이퍼링크로만 제한되므로 단추와 같은 하이퍼링크가 아닌 다른 하이퍼링크에서 사용해야 하는 경우에는 단추처럼 보이도록 하이퍼링크 스타일을 지정하는 것과 같이 약간 해킹하는 것이 좋습니다.
에 소에를을 하면,tabindex그러면 당신은 그것을 사용할 수 있습니다.:focus유사 클래스를 사용하여 클릭을 시뮬레이션합니다.
#btnLeft:focus {
width: 70px;
height: 74px;
}<img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>이지, "" "" "" ""이 아닙니다.:active사이비 계급
이 작업은 JavaScript 또는 Checkbox Hack에서만 수행할 수 있습니다.
확인란 해킹은 기본적으로 레이블을 클릭하여 확인란을 "확인"하여 원하는 대로 레이블 스타일을 지정할 수 있도록 합니다.
데모.
OP가 그가 원하는 것을 명확히 하기 전에 대답했습니다.
타일러 H는 정말 좋은 대답을 했고, 저는 마지막 버튼을 시각적으로 업데이트해야 했습니다.
.btn {
border-radius: 5px;
padding: 10px 30px;
box-shadow: 1px 1px 1px #000;
background-image: linear-gradient(to bottom, #eee, #ddd);
}
.btn:hover {
background-image: linear-gradient(to top, #adf, #8bf);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
}
#btnControl {
display: block;
visibility: hidden;
}<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;
}
여기에 "클릭된" 클래스도 추가하여 JavaScript가 필요할 경우 효과를 제공할 수 있도록 합니다.저는 제로 픽셀 드롭섀도 필터를 사용합니다. 제 경우에는 주어진 투명 그래픽이 파란색으로 강조 표시되기 때문입니다.
여기 0s에 필터가 있어서 효과가 없어요.효과가 해제되면 지연과 함께 전환을 추가하여 "클릭" 효과를 제공할 수 있습니다.
.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;
}
이를 통해 사용자가 버튼을 클릭하면 파란색으로 강조 표시된 후 천천히 페이드아웃되도록 설정할 수 있습니다(물론 다른 효과도 사용할 수 있습니다).
강조 표시할 애니메이션이 즉각적이라는 점에서 제한적이지만 원하는 효과를 제공합니다.애니메이션과 함께 이 방법을 사용하여 전반적인 전환을 보다 원활하게 수행할 수 있습니다.
경고!특히 아래 간단한 답변! :)
여기서 많은 (그렇지 않으면 올바른) 답변이 주장하는 것에도 불구하고 (클릭 후에도 계속 표시되는 블록/팝업과 같이) CSS만(그리고 확인란 해킹을 사용하지 않고) 유지되는 변경을 실제로 유지할 수 있습니다. 호버 중 지속성만 필요한 경우.
그래서 만약 그것들이 당신에게 효과가 있다면, Bojangles와 TylerH의 대답을 살펴보십시오. 그러나 당신이 클릭한 후에도 블록을 계속 볼 수 있는 간단하고 CSS만의 대답을 원한다면, 그리고 심지어 후속 클릭으로 블록을 사라지게 할 수도 있습니다. 그러면 이 해결책을 볼 수 있습니다.
저도 비슷한 상황이 있었습니다.나는 클릭에서 자바스크립트를 추가하거나 마크업/HTML(진정한 CSS 솔루션)을 변경할 수 없는 팝업 디비가 필요했는데, 이것은 몇 가지 주의 사항으로 가능합니다.HTML을 변경('id' 추가)하지 않으면 멋진 팝업을 만들 수 있는 :target trick을 사용할 수 없기 때문에 사용할 수 없습니다.
제 경우 팝업 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;
}
(팝업을 클릭하여 사라지게 하는 것도 가능) 예입니다.
CSS-클릭 온리 팝업 디브 (자바스크립트 또는 HTML 변경 없음!)
아래 코드 스니펫 예제도 삽입했지만 스택 오버플로 샌드박스의 위치가 이상하기 때문에 일반적으로 필요하지 않은 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 />먼저 포커스를 사용하겠습니다.
그 이유는 제가 보여드리는 예시에 잘 어울리기 때문입니다.마우스 다운 유형 이벤트를 원하는 사용자는 활성화를 사용합니다.
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'); }
JSFiddle 링크: http://jsfiddle.net/00wwkjux/
OP는 클릭 이벤트 중에만 효과가 지속되기를 원합니다.이제 이것이 그 필요성에 대해 정확하지는 않지만, 그것은 가깝습니다.활성화는 마우스가 아래로 내려져 있는 동안 애니메이션으로 표시되며 더 오래 지속해야 하는 변경 사항은 JavaScript를 사용하여 수행해야 합니다.
호버에 빨간색으로 표시되고 호버에 있는 동안 클릭하면 파란색으로 표시되는 요소에 문제가 있었습니다.CSS를 사용하여 이를 달성하려면 다음과 같은 예가 필요합니다.
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>
저는 CSS 셀렉터의 순서가 제가 안고 있는 문제라는 것을 발견할 때까지 한동안 고생했습니다.문제는 제가 장소를 바꾸었는데 액티브 셀렉터가 작동하지 않는다는 것이었습니다.그 때 알게 된 것은:hover 가고 에 가다:active.
마우스 호버와 마우스 클릭을 위한 아래 코드가 있으며 작동합니다.
//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;
}
어떤 이유로 JavaScript를 사용할 수 없는 경우 다음 해결 방법을 사용하여 전환 단추를 만드는 것이 좋습니다.HTML 요소는 내용을 숨기고 표시하는 공개 위젯을 만듭니다.우리는 (ab)를 사용할 것입니다.<details>요소와 약간의 CSS, 그래서 그것을 "디테일 해킹"이라고 부르자.
작동 방식
여기에 기본적인 예가 있습니다.
details[open] summary {
color: red;
}<details>
<summary>Toggle</summary>
</details>요소를 클릭하면 다음과 같이 전환됩니다.<details>'open 및 속성<summary>의 스타일.의 스타일을 전환할 수도 있습니다.<details> 형제자매
details[open] summary {
color: red;
}
details[open] ~ p {
color: blue;
}<details>
<summary>Toggle</summary>
</details>
<p>Hello, world!</p>체크박스 해킹에 비해 이 방법의 장점은 버튼이 키보드로 접근할 수 있다는 것입니다.
메모들
- 그
<summary>의 내용은 문단 내에서 사용할 수 있는 제목 내용, 일반 텍스트 또는 HTML일 수 있습니다. - 그
<summary>의display은 기값은 입다니입니다.list-item목록 항목의 삼각형을 제거하려면 값을 다음으로 변경합니다.inline-flex를 들면 를들면예면.
summary {
display: inline-flex;
}
또는 다음 규칙 중 하나를 사용할 수 있습니다.
summary {
list-style: none;
}
summary::marker {
content: none;
}
OP의 질문에 대한 답은
summary {
display: inline-flex;
}
details[open] img {
width: 75px;
height: 75px;
}<details>
<summary><img src="https://i.stack.imgur.com/5FBwB.png" alt="Heart"></summary>
</details>자세한 예는 출처 참조: <details> 요소로 CSS 토글 버튼 만들기
당신이 하고 싶은 일에 따라, 초점이 변화를 유지하도록 하는 것이 선택사항이 될 수 있습니까?
<button></button>
<style>
button {
width: 140px;
height: 70px;
background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
background-size: cover;
}
button:focus {
width: 240px;
height: 120px;
}
</style>
https://jsfiddle.net/anm92d0r/
이미지 태그에서는 작동하지 않습니다.그러나 요소 ID로 판단하면 버튼 기능을 찾고 있는 것 같습니다.
사용할 수 있습니다.:target.
또는 클래스 이름으로 필터링하려면 다음을 사용합니다..classname:target.
또는 다음을 사용하여 ID 이름으로 필터링#idname:target.
#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;
}<a href="#id01">Open</a>
<div id="id01" class="msg">
<a href="" class="close">×</a>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>언급URL : https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css
'source' 카테고리의 다른 글
| 데이터베이스의 테이블 크기를 결정하기 위한 쿼리?(계속) (0) | 2023.08.29 |
|---|---|
| 오라클에서 DBlink의 동의어를 사용하는 방법은 무엇입니까? (0) | 2023.08.29 |
| Git Clone: 파일만 부탁합니다. (0) | 2023.08.24 |
| PowerShell을 사용하여 월 번호를 월 이름으로 변환 (0) | 2023.08.24 |
| (방법) 특정 함수 호출을 인라인으로 연결할 수 있습니까? (0) | 2023.08.24 |