Разные ссылки CSS Hover меняют картинку

Question

Я хотел бы, чтобы CSS накладывал эффект на несколько ссылок, которые влияют на одно и то же изображение.Если вы посмотрите на этот пример сайта, у меня есть ссылки на Ремонт, Продажи, Обновления и Восстановление данных.Когда вы наводите курсор на одну из них, я бы хотел, чтобы изображение слева от них изменилось.Вы можете навести курсор на изображение, находящееся в данный момент там, чтобы увидеть, что я имею в виду.

веб-сайт: http://ctuchicago.squarespace.com/

Answer 1

Я бы создал поле, которое содержит изображение и все ссылки.Тогда при наведении рамки на изображение изменится.Это не дает вам именно то, что вы хотите - то, что только зависание над ссылкой меняет изображение, но я думаю, что оно достаточно близко и намного проще.

Answer 2

Поместите изображение внутри тега a.Затем используйте position: relative для позиционирования изображения ...

, например

a img{
   position: relative;
   left: -50px;
}

Answer 3

Кажется, что это работает ... частично XD

<div class="frontdiv fblankd">
    <a href="/audio-video" id="hav" style="width: auto;">
        <div style="
            height: 80px;
            margin-left: 81px;
            background: white;
            color: black;
        ">
            <h3>AUDIO / VIDEO</h3>
            <p><a href="#music">Music Server</a>, <a href="#theatre">Home Theatre</a>, <a href="#zone">Zone Systems</a>, <a href="#remote">Universal Remote Control</a></p>
        </div>
    </a>
</div>

Основная идея состоит в том, чтобы ваш контент был в теге (как когда-либо говорило тело).Сделано со стилем, установил привязку к width: auto и обернул содержимое в div.Затем этот div я дал высоту 80px, левое поле 81px, фон белого и цвет шрифта черный.

Answer 4

Оберните теги <p> и <h3> внутри тегов <a>.