Как создать эффект наведения для статических фоновых изображений ...? - PullRequest
Новая
       5

Как создать эффект наведения для статических фоновых изображений ...?

0 голосов
/ 04 октября 2011

Я не JS-парень, но я пытаюсь найти способ создать «пузырь» с содержимым, когда посетитель наводит курсор на фоновое изображение. HTML выглядит так: 

<div id="certifications">
        <p class="gold left">Microsoft Gold Partner</p>
        <p class="sdvo center">Service Disabled Veteran Owned Small Business</p>
        <p class="ibm right">IBM Authorized Partner</p>
</div><!-- end #certifications -->

И CSS выглядит так, что контролирует эту область: 

#certifications {
height: 111px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

#certifications p {
margin-top: 20px;
text-indent: -9999px;
}

#certifications .gold {
background-image: url(images/microsoft-gold.jpg);
background-repeat: no-repeat;
display: inline;
height: 70px;
width: 33%;
float: left;
margin-top: 25px;
padding: 0;
}

#certifications .sdvo {
background-image: url(images/sdvosb.png);
background-repeat: no-repeat;
display: inline;
height: 100px;
width: 30%;
float: left;
margin-left: 20px;
}

#certifications .ibm {
background-image: url(images/partners/IBM.png);
background-repeat: no-repeat;
display: inline;
height: 99px;
width: 31%;
margin-top: 25px;
margin-left: -50px;
}

Когда кто-то наводит мышью на любое из трех фоновых изображений, я бы хотел, чтобы эффект появился (в идеале, используя только CSS, но если мне нужно использовать JS, это не имеет большого значения). Главное - сделать его обратно совместимым с IE6.

Я собираюсь продолжить исследовать это и опубликую, если найду ответ, но я действительно буду признателен за любые идеи, которые вы, ребята, могли бы предложить. Спасибо за ваше время и понимание!

1 Ответ

1 голос
/ 04 октября 2011

Я фанат ленивого кодирования и не изобретаю велосипед. Эти ребята уже сделали это дюжиной разных способов. http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

...