Hướng dẫn css button active pressed - nút css hoạt động được nhấn

Khi nút được nhấp, tôi muốn nó ở lại với kiểu hoạt động thay vì quay trở lại phong cách bình thường. Điều này có thể được thực hiện với CSS xin vui lòng? Tôi sử dụng nút blurb từ chủ đề Divi (WordPress). Làm ơn giúp tôi!

Nội phân chính

• JavaScript / jQuery
• Không phải là câu trả lời bạn đang tìm kiếm? Duyệt các câu hỏi khác được gắn thẻ HTML CSS WordPress hoặc đặt câu hỏi của riêng bạn.
• Làm thế nào để bạn giữ kiểu CSS hoạt động sau khi nhấp vào nút?
• Làm cách nào để tạo một nút hoạt động trong CSS?
• Làm thế nào để bạn tạo kiểu cho một nút nhấp chuột?
• Làm thế nào để bạn nhấn hiệu ứng nút trong CSS?

code:

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:hover {
           color: red !important; }
    
    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:selected {
      background-color: #ff4b46;
      color: #fff; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:active {
        color: white !important;
       background-color: red; 
        width: 140px;
        height: 100px; }

hỏi ngày 2 tháng 7 năm 2015 lúc 7:55Jul 2, 2015 at 7:55

4

CSS

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

Giải pháp thay thế tiềm năng cuối cùng bằng cách sử dụng CSS sẽ là sử dụng

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

3, giả sử các mục được nhấp là đặt các tuyến đường (ví dụ: neo) trong trang- tuy nhiên điều này có thể bị gián đoạn nếu bạn đang sử dụng định tuyến (ví dụ: góc), tuy nhiên điều này không có vẻ như ở đây .

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

Active
Focus
Target 1
Target 2
Target 3

JavaScript / jQuery

Không phải là câu trả lời bạn đang tìm kiếm? Duyệt các câu hỏi khác được gắn thẻ HTML CSS WordPress hoặc đặt câu hỏi của riêng bạn.

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});

button.selected{
  color:red;
}

ItemItemItem
  

Làm thế nào để bạn giữ kiểu CSS hoạt động sau khi nhấp vào nút?Jul 2, 2015 at 8:01

SW4SW4SW4

Làm cách nào để tạo một nút hoạt động trong CSS?20 gold badges128 silver badges134 bronze badges

2

Làm thế nào để bạn tạo kiểu cho một nút nhấp chuột?
This example includes one "on click - off click 'hover / active' state"

Làm thế nào để bạn nhấn hiệu ứng nút trong CSS?

hỏi ngày 2 tháng 7 năm 2015 lúc 7:55

CSS

  
   

      //MY DIV CONTENT
   
  

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

CSS

   

      //MY DIV CONTENT
   


   //MY BUTTON STUFF

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

Giải pháp thay thế tiềm năng cuối cùng bằng cách sử dụng CSS sẽ là sử dụng

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

3, giả sử các mục được nhấp là đặt các tuyến đường (ví dụ: neo) trong trang- tuy nhiên điều này có thể bị gián đoạn nếu bạn đang sử dụng định tuyến (ví dụ: góc), tuy nhiên điều này không có vẻ như ở đây .

Do đó, không có cách nào trong CSS hoàn toàn chuyển đổi trạng thái theo kiểu- nếu không có công việc nào ở trên cho mình, bạn sẽ cần kết hợp với sự thay đổi trong HTML của bạn (ví dụ: dựa trên hộp kiểm) hoặc áp dụng/loại bỏ chương trình lớp sử dụng ví dụ: jQuery15 gold badges105 silver badges147 bronze badges

Đã trả lời ngày 2 tháng 7 năm 2015 lúc 8:01Dec 8, 2017 at 19:23

68.3K20 Huy hiệu vàng128 Huy hiệu bạc134 Huy hiệu đồng

Chúng tôi sẽ sử dụng hộp kiểm ẩn. Ví dụ này bao gồm một "trên nhấp chuột - TẮT nhấp vào 'Hover / Active' State"

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

0

-

Để tự nhấp vào nội dung:

HTMLJul 2, 2015 at 12:55

Không phải là câu trả lời bạn đang tìm kiếm? Duyệt các câu hỏi khác được gắn thẻ HTML CSS WordPress hoặc đặt câu hỏi của riêng bạn.

Làm thế nào để bạn giữ kiểu CSS hoạt động sau khi nhấp vào nút?

Làm cách nào để tạo một nút hoạt động trong CSS?. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.

Làm cách nào để tạo một nút hoạt động trong CSS?

Làm thế nào để bạn tạo kiểu cho một nút nhấp chuột?The button can be created using and tags. Pure CSS Active Buttons Class: pure-button-active: This class is used to create an active button.

Làm thế nào để bạn tạo kiểu cho một nút nhấp chuột?

Làm thế nào để bạn nhấn hiệu ứng nút trong CSS?use Jquery/Javascript. It certainly is better than the "hack" for pure HTML / CSS.

Làm thế nào để bạn nhấn hiệu ứng nút trong CSS?

hỏi ngày 2 tháng 7 năm 2015 lúc 7:55use CSS transform property to add a pressed effect on the button when it is active. CSS transform property allows us to scale, rotate, move and skew an element.