자바 스크립트 고급 마우스 오버

Question

요소의 텍스트 색상을 배경색으로 뒤집을 수 있습니까?
예 :

그래서 제 화상은 정상 상태이다. 두 번째는 마우스 오버 중이고 마지막은 완료된 마우스 오버입니다.
편집 : 배경을 슬라이드 아웃시키고, 뒤쪽의 검은 색 블록 "슬라이드"로 변경하려는 각 문자의 색을 원합니다.

Answer 1

다시 inverted의 폭을 재설정합니다. 다음은 example입니다 (Opera 및 Chrome에서 테스트 됨). 물론 이러한 접근 방식에는 몇 가지 단점이 있습니다.

1. 브라우저는 CSS 전환을 지원해야합니다.
2. 실제 반전이 아니므로 색상을 수동으로 설정해야합니다.
3. 추가 마크 업.

두 번째 및 세 번째는 JavaScript로 처리 할 수 ​​있지만 (반전 된 색상을 계산하고 innerHTML을 대체하십시오.)

편집 : egarcia said in his answer으로, 사용자 정의 함수 또는 jQuery를 함께 width 속성에 애니메이션을 적용 할 수 있습니다, 그래서 첫 번째 단점은 무시 될 수있다.

Answer 2

당신은 단지 초기 상태, 마우스 오버 이벤트 및 mouseOut 이벤트를 할 것이다

<div id="item" class="default" onmouseover="this.className='over'" onmouseout='this.className='out'"></div> 

또는 당신이 그 CSS 클래스의 각이

<div id="item" class="default" onmouseover="Over(this)" onmouseout="Out(this)">Home</div> 

<script type="text/javascript"> 
    function Over(obj) 
    { if (obj.className == "default") obj.className = "over"; } 

    function Out(ojb) 
    { if (obj.className == "over") obj.className = "out"; } 
</script> 

등을 시도해 볼 수도 있습니다 일단 이런 일이 발생 보장하기 위해 반전 스타일을가집니다.

Answer 3

애니메이션이 없습니다. 당신이 할 수있는 최선의 방법은 애니메이션이 왼쪽에서 오른쪽으로 진행됨에 따라 각 캐릭터의 색상을 변경하는 것이지만, 아마 janky로 보일 것입니다.

CSS 자체로 반전을 수행 할 수도 있지만 (애니메이션을 건너 뜁니다.).

a { 
    background: #000; 
    color: #fff; 
} 


a:hover { 
    background: #fff; 
    color: #000; 
} 

Answer 4

깔끔한 - 오, In conclusion I think you must split in 3, convert each in decimal, substract each from 255, and if you want hexa by all means, convert each back in hexa, reasamble and adding # to the result string. 내가 당신의 대답을 찍은 포럼 스레드의 조각이지만, 그것은 의미가 있습니다.

<script language="JavaScript" type="text/JavaScript"> 
function bla(){ 
var b = document.getElementsByTagName('body')[0]; 
var bg = b.style.backgroundColor; 
alert('the present background is '+b.style.backgroundColor) 
alert('the present background will be change into inversed RGB color') 
var oldCol = bg.split('(')[1].split(')')[0].split(','); 
var newCol = new Array() 
for(var i=0;i<oldCol.length;i++){ 
newCol[i] = 255-Number(oldCol[i]); 
} 
b.style.backgroundColor = 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')'; 
alert('the new background is '+b.style.backgroundColor) 
} 
onload=bla 
</script> 

편집 :

그리고 직선도 그 포럼에서

당신은 또한 상태 '이상'은 변경하지 않고 색상을 변경할 수 있도록 어, 난 당신이 프로그램이 작업을 수행 할 수 있으리라 믿고있어 ? 그렇지 않으면 예, 다른 2 개의 대답이 무엇을 말했는지.

Answer 5

3 가지 그래픽을 사용하면 JavaScript로이 작업을 수행 할 수 있습니다. 하나는 기본값이고, 두 번째는 OnMouseOver 이벤트로 대체되고 세 번째 이벤트는 OnMouseOut 이벤트로 대체됩니다.

Answer 6

추가 마크 업을 사용해도 괜찮 으면 문자로는 아니지만 픽셀로으로 할 수 있습니다.

트릭은 두 가지 요소를 생성합니다. 하나는 '정기적으로'표시되고 '마우스 오버/마우스 오버'입니다. 둘 다 포함하는 것이 필요할 것입니다. 이처럼 :

<div id='container'> 
<div id='normal' >Home</div> 
<div id='inverted' style='width:0;'>Home</div> 
</div> 

컨테이너는 normal 스팬이, 말, 검은 색과 흰색 배경, 그리고 반전이 반대 색상을해야 할 position: relative (또는 절대)

이 있어야합니다.

또한 div는 왼쪽 위 모서리가 normal (아마도 0,0)과 일치하도록 위치를 설정하여 절대적으로 위치해야합니다. inverted은 overflow: hidden이어야합니다. HTML 자체에 명시적인 style='width:0;'이 있음을 확인하십시오.

#container { position: relative; } 
#normal { 
    color: black; 
    background-color: white; 
} 
#inversed { 
    color: white; 
    background-color: black; 
    position: absolute; 
    overflow: hidden; 
    top: 0; /* modify top/bottom if needed */ 
    bottom: 0; 
} 

이제 필요한 것은 onmouseover 및 onmouseout의 두 가지 코드를 작성하는 것입니다.

• container.Onmouseover는 완전히 normal을 덮고, 100 %에 도달 할 때까지 서서히 inverted의 폭을 증가시키는 효과를 활성화한다. jquery를 사용하는 경우 한 줄에 animate function을 사용하여 jquery를 만들 수 있습니다.
• container.Onmouseout 당신은 CSS 전환하여이 작업을 수행 할 수 있습니다 0