I have a div that consists of a FontAwesome icon and some text. I'd like to keep the white colour of the icon and change it to green when the pointer is hovering on top of the root div. How can I do this? Show The Component:
The styling:
I thought I'd be able to change colour of the icon if I set:
But doing this only changes the colour of the text, and not the colour of the icon. Creating good user experiences means clearly defining items that are links or otherwise clickable. If you use icons, one way to do that is to change the background color and the icon color on hover. Hyperlinks are the most fundamental building blocks of the web. They are the elements that people interact with the most. In the earlier days of the web, only text and blue color were used to indicate links. In modern web design, we can be more creative when designing links such as using icons but we need to ensure that the usability of the links doesn't suffer. When designing icon links we need to make it obvious they are clickable. Using hover effects to change the icon and background color is a good way to indicate they are clickable. In this tutorial, we're using FontAwesome icons. Icon fonts are ideal to work with when you want to change the link colors easily. All you have to do is change their Since we're not using any a tags for the links and instead relying on Javascript's External LinksLet's start by including the necessary Bootstrap and FontAwesome source links in the HTML file: HTMLBelow we have the code for a
Bootstrap container box with three links. Replace the Notice that we have an icon and a descriptive heading with an h3 tag under the icon for each link. This is because icons by themselves may not be descriptive enough for the users so we also provide text to make it clear what the link is about. According to the Nielsen Norman group, icons need a text label to clarify their meaning. CSSHere's the complete CSS code. We have a div with a classname of And here's our finished icon links. Hover over the icon boxes to see the hover effect: CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. 두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.
CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다. 애니메이션 가능한 CSS 속성은?웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 트랜지션을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, 애니메이션 가능한 속성의 집합 (en-US)은 유한한 집합으로 제한됩니다. 참고: 노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다. 참고: 또한, 종종 auto 값은 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 이는 브라우저와 버전에 따라 예상하지 못한 결과를 초래할 수 있으며 피해야 합니다. 다수의 애니메이션이 적용된 속성 예제HTML 내용
CSS 내용
트랜지션 정의에 사용한 CSS 속성CSS 트랜지션은 단축(shorthand) 속성
여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다: (이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS transition-property (en-US)트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다. transition-duration
(en-US)트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
transition-timing-function (en-US)속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 타이밍 함수 (en-US)는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.
transition-delay 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
다음과 같이 단축 CSS 문법을 사용합니다.
트랜지션 완료 감지하기트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 propertyName 트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열 elapsedTime 이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수. 이 값은 평소대로
참고: 노트: 트랜지션을 중단하면 속성값 목록이 다른 개수를 가진 경우어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,
위는 아래와 같이 처리합니다.
비슷하게, 어떤 속성의 값 목록이
위를 아래와 같이 해석합니다.
간단한 예제이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.
메뉴 하이라이팅에 트랜지션 사용CSS의 흔한 사용은 사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다. 코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, (여러분의 브라우저가 트랜지션을 지원한다고 가정하면) 라이브 데모를 보고 싶을지도 모르겠습니다. 그것이 사용한 CSS를 직접 볼 수도 있습니다. 우선 HTML을 사용하여 메뉴를 설정합니다.
그리고 우리 메뉴의 모습과 느낌(look and feel)을 CSS로 만듭니다. 관련 부분이 여기 있습니다.
이 CSS는 그 요소가
그 효과를 장황하게 설명하는 대신, 브라우저가 트랜지션을 지원한다면, 라이브 샘플을 살펴보세요. 트랜지션을 이용하여 JavaScript 기능 부드럽게 하기트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.
JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.
추가 노력 없이 CSS로 이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.
여기에서 확인할 수 있습니다. http://jsfiddle.net/RwtHn/5/ 명세
같이 보기 |