CSS при наведении изображения - PullRequest
Новая
       25

CSS при наведении изображения

0 голосов
/ 11 апреля 2011

Используя метод, который я сделал раньше, но возникли проблемы.Не уверен, что это спрайт или что-то еще. В основном, у вас есть две версии изображения, сохраненные в одном файле, которые расположены друг над другом, и вы используете CSS для настройки полей при наведении.Вот пример его успешной работы: http://minimalpluscreative.com

Попытка сделать то же самое здесь, но столкнуться с проблемами с переполнением: hidden;не работает.Вместо этого отображается полное (двойное) изображение.Вот как это выглядит: http://cl.ly/023p1I1D1W0W3a1T1q1R Это должна быть только верхняя половина изображения с переполнением: hidden;предотвращение показа второй половины.

Помощь?Я уверен, что это какая-то синтаксическая ошибка ...

HTML: 

    <div id="work" class="sub">
        <h3>MUSIC VIDEOS</h3>
        <img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
    </div>

CSS: 

.sprite {
        width:140px; 
        height:61px; 
        overflow:hidden;
}
.sprite:hover {
        margin-top:-61px;
}

Ответы [ 2 ]

1 голос
/ 11 апреля 2011

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

Как было сказано ранее, трудно увидеть проблему, не увидев ваш реальный код в контексте, но, исходя из того, что я вижу, может быть несколько потенциальных ошибок:

Вам нужно обернуть изображение в содержащий элемент и присвоить ему ширину, высоту и переполнение. Скрытое переполнение будет скрывать то, что находится за пределами границ, которые div содержит . Элемент изображения является изображением, оно не содержит изображения, поэтому установка его на переполнение: скрытый не собирается ничего скрывать, а присвоение ему ширины просто изменит его размер, а не «обрезает» это (какой эффект вы собираетесь). Так что вам нужно что-то вроде: 

<div id="work" class="sub">
    <h3>MUSIC VIDEOS</h3>
    <a class="sprite" href="#">
        <img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
    </a>
</div>

с этим css: 

.sprite {
    width:140px; 
    height:61px; 
    overflow:hidden;
}
.sprite img {
    margin-top: 0;
}
.sprite:hover img {
    margin-top: -61px;
}

Я предлагаю вам использовать «a» в качестве содержащего элемента, поскольку не все браузеры распознают псевдокласс класса hover по тегам, отличным от тегов привязки.

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

1 голос
/ 11 апреля 2011

В примере сайта, на который вы ссылаетесь, свойство overflow: hidden установлено на внешнем div # a и div # work в вашем коде, для которого переполнение должно быть скрыто.

Таким образом, когда вы изменяете поле на вашем изображении, оно будет перемещаться в рамке внешнего элемента.

Кроме того, мне пришлось добавить имя тега в объявление наведения. 

<html>
<head>
<style>
#work{  
        position:relative;
        overflow:hidden;
        width:140px;
        height:61px; 
}
div.sprite {
        margin-top:0;    
}

div.sprite:hover {
        margin-top:-61px;
}
/* instead of an image */
.sprite div{
 height:61px;
}
.red {background:red}
.blue {background:blue}

</style>
</head>
<body>
<div id="work">
 <div class="sprite">
  <div class="red">a</div>
  <div class="blue">b</div>
 </div>
</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...