Override hoạt hình với: hover

Question

Tôi có hình ảnh động sau CSS:

.border-strobe { 
    -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out; 
} 

@-webkit-keyframes border-strobe-animation { 
    0% {border:2px solid #FF1d38;} 
    50% {border:2px solid #000000;} 
    100% {border:2px solid #FF1d38;} 
} 

Về cơ bản, những gì tôi muốn làm là:

• Trên hover (vì vậy .border-strobe:hover) ví dụ, tôi muốn thay đổi màu đường viền là #FF1D38.

• Khi tôi di chuyển ra khỏi di chuột, tôi muốn chỉ đơn giản là để cho hình ảnh động chạy đó là khóa học bình thường.

Tuy nhiên, vấn đề là tôi có một vài yếu tố trên các trang có lớp .border-strobe và tôi muốn giữ chúng kịp thời.

Có cách nào đơn giản để ghi đè màu đường viền bằng cách di chuột và giữ các hình động phù hợp với nhau hay không hiện tại bạn không thể thực hiện việc này?

Điều đó có hợp lý không?

Answer 1

Có lý do nào khiến bạn muốn hoạt ảnh tiếp tục chạy khóa học bình thường không?

Nếu màu di chuột của bạn giống như đầu và cuối của hoạt ảnh, tại sao bạn không xóa hoạt ảnh khi di chuột trong khi màu đường viền được xác định trong lớp di chuột?

Dưới đây là gần nhất tôi có thể nhận được: http://jsfiddle.net/xsjJy/

CẬP NHẬT

Tôi không thể tin rằng tôi đã không nghĩ về nó trước! Nếu bạn sẵn sàng thay đổi HTML, bạn có thể ném vào một khoảng mặt nạ (hoặc div hoặc bất cứ thứ gì bạn muốn), và chỉ cần thay đổi đường viền khi bạn di chuột qua đường viền.

Dưới đây là bản cập nhật jsFiddle: http://jsfiddle.net/xsjJy/2/