onmouseover - Вопрос

[alekcandr]

Добрый вечер, возник вопрос по поводу оформления div-блоков. Вот решил изменить навигацию,при наведении мышкой нужный блок, он выделяется цветом. Но код получился громоздкий ... Может кто подскажет как можно сделать с помощью CSS, так как я побывал но выделялась только область ссылки, а не блок целиком. За ранее благодарен.

<div class="navigation_menu" onmouseover="this.className='navigation_menu_bg'" onmouseout="this.className='navigation_menu'"><img src="../images/icon_menu/home.gif" width="10" height="10"><a href="/index.php" title="Главная страница сайта"> Главная страница</a></div>

<div class="navigation_menu" onmouseover="this.className='navigation_menu_bg'" onmouseout="this.className='navigation_menu'"><img src="../images/icon_menu/news.gif"  width="10" height="10"> <a href="/news" title="Новости"> Новости</a></div>

<div class="navigation_menu" onmouseover="this.className='navigation_menu_bg'" onmouseout="this.className='navigation_menu'"><img src="../images/icon_menu/history.gif" width="10" height="10"><a href="/history.html" title="История учебного заведения"> Наша история</a></div>

  .navigation_menu  {

    margin: 5px 0px 5px 0px;
    padding: 3px 7px 3px 7px; 
    border: 1px solid #cdc9c9;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;

}

  .navigation_menu a:link {

    text-decoration: none;

}

  .navigation_menu_bg  {

    margin: 5px 0px 5px 0px;
    padding: 3px 7px 3px 7px; 
    border: 1px solid #cdc9c9;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #dcd9d9;

    }

  .navigation_menu_bg a:link {

    text-decoration: none;

}

[Switch74]

Можно использовать hover пример

[alekcandr]

Можно использовать hover пример

Спасибо большое, а нет программы подобной? Очень удобно, если знаете поделитесь ссылкой.

[Switch74]

вы имеете ввиду программу для написания кодов на подобие http://jsfiddle.net?

можно воспользоваться Adobe Dreamweaver, для начинающих в самый раз.