Hover ефект под IE и Firefox

CSS и HTML » HTML

accorp   трудност:    видян: 5816

Да разгледаме една част от подобен код:
.table1:hover{...}

Този код не работи заради втората част - :hover

Нека да направим един прост пример за работещ код съвместим с повечето браузъри.
В секция HEAD:

<style type="text/css">
.imgon{
border: 1px solid #FFFFFF;
}
.imgoff{
border: 1px solid #CCCCCC;
}
</style>
...

Сега нека да използваме това в IMG тага.
<img class="imgoff" onmouseover="this.className='imgon'" onmouseout="this.className='imgoff'" src="file.ext">

Първо: задаваме клас imgoff. Това означава, че по default нашата картинка ще приеме свойствата, който сме задали за този клас.

Второ: указваме, че при преминаването на курсора над картинката тя ще си присвои свойства от клас imgon.

И накрая: при махане на курсора от площта на картинката тя ще приеме свойствата на класа default, а именно клас imgoff.

Автор: accorp