Hover ефект под IE и Firefox
Публикувана от smilev на January 12 2011 10:50:01
Разширена новина
Да разгледаме една част от подобен код:
.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.