누름

Development Tip

누름

yourdevel 2020. 12. 30. 19:43

누름

button누르면 스타일이 바뀌는 을 만들고 싶습니다 . 이것은 내 CSS 코드입니다.

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

<button>Button</button>

클릭 한 상태로만 변경됩니다. 눌렀을 때 스타일을 바꾸고 싶어요. 예를 들어, 정상 상태는 흰색, 클릭 중 상태는 녹색, 클릭이 해제 된 후에는 빨간색이됩니다.

<a>버튼 대신 태그 를 사용하면이 작업을 수행 할 수 있습니다 . 정확히 요청한 것이 아니라는 것을 알고 있지만 이에 대한 해결책을 찾을 수없는 경우 다른 옵션을 제공 할 수 있습니다.

여기에 다른 답변의 데모에서 빌려서 다음을 생성했습니다.

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

<a id="btn" href="#btn">Demo</a>

의 사용에 유의하십시오 :target. 요소가 해시를 통해 대상으로 지정 될 때 적용되는 스타일입니다. 이는 또한 HTML이 <a id="btn" href="#btn">Demo</a>자체를 타겟팅하는 링크 여야 함을 의미합니다 . 및 데모 http://jsfiddle.net/rlemon/Awdq5/4/

@BenjaminGruenbaum 덕분에 여기에 더 나은 데모가 있습니다 : http://jsfiddle.net/agzVt/

_{또한 각주로, 이것은 실제로 JavaScript로 수행되어야하고 요소에서 CSS 클래스를 적용 / 제거해야합니다. 훨씬 덜 복잡 할 것입니다.}

:focus사용자가 다른 곳을 클릭하지 않는 한 스타일이 유지되는 것을 사용할 수 있습니다 .

button:active {
    border: 2px solid green;
}

button:focus {
    border: 2px solid red;
}

약간의 JS를 포함해야합니까? CSS는 기본적으로이 작업을 위해 만들어지지 않았기 때문입니다. CSS는 HTML에 스타일을 추가하기위한 스타일 시트 일 뿐이지 만 가상 클래스는 기본 CSS가 할 수없는 일을 할 수 있습니다. 예를 들어 button:activeactive는 pseudo입니다.

참고:

http://css-tricks.com/pseudo-class-selectors/ 여기에서 pseudo에 대해 자세히 알아볼 수 있습니다!

코드 :

기본이지만 유용한 코드입니다. 그리고 예 :active는 클릭 이벤트가 트리거 된 후에 만 발생합니다.

button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}

button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}

이것이 CSS가 할 일이고 rlemon이 제안한 것은 좋지만 그가 제안한 것처럼 a태그 가 필요합니다 .

CSS 사용 방법 :

You can use :focus too. :focus would work once the click is made and would stay untill you click somewhere else, this was the CSS, you were trying to use CSS, so use :focus to make the buttons change.

What JS would do:

The JavaScript's jQuery library is going to help us for this code. Here is the example:

$('button').click(function () {
  $(this).css('border', '1px solid red');
}

This will make sure that the button stays red even if the click gets out. To change the focus type (to change the color of red to other) you can use this:

$('button').click(function () {
  $(this).css('border', '1px solid red');
  // find any other button with a specific id, and change it back to white like
  $('button#red').css('border', '1px solid white');
}

This way, you will create a navigation menu. Which will automatically change the color of the tabs as you click on them. :)

Hope you get the answer. Good luck! Cheers.

You can do this with php if the button opens a new page.

For example if the button link to a page named pagename.php as, url: www.website.com/pagename.php the button will stay red as long as you stay on that page.

I exploded the url by '/' an got something like:

url[0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>


<html>
<head>
  <style>
    .btn{
     background:white;
     }
    .btn:hover,
    .btn-on{
     background:red;
     }
  </style>
</head>
<body>
   <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>

note: I didn't try this code. It might need adjustments.

Maybe :active over :focus with :hover will help! Try

button {
background:lime;
}

button:hover {
background:green;
}

button:focus {
background:gray;
}

button:active {
background:red;
}

Then:

<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>

Then:

<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>

 Sorry about that last one. :) I was just showing you a cool function! 
Wait... did I just emphasize a code block? This is cool!!!

ReferenceURL : https://stackoverflow.com/questions/15463854/pressed-button-selector

'Development Tip' 카테고리의 다른 글

XML을 동적 C # 객체로 변환 (0)	2020.12.30
Python으로 YAML 파일을 읽으면 yaml.composer.ComposerError : 스트림에 단일 문서가 필요합니다. (0)	2020.12.30
SQL : 고유 한 행을 선택하면서 한 필드의 최소값으로 그룹화 (0)	2020.12.30
GoDaddy SSL 인증서가 Java에서 작동하지 않음 (0)	2020.12.30
C # 관리자 권한으로 실행되는지 확인 (0)	2020.12.29

현재글누름

yourdevel

누름

누름

'Development Tip' 카테고리의 다른 글

'Development Tip'의 다른글

티스토리툴바

누름

누름 선택자

'Development Tip' 카테고리의 다른 글

'Development Tip'의 다른글

관련글

티스토리툴바

누름