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

Мне нужен div с изображением bg для наложения изображения (с некоторой прозрачностью) при наведении курсора. Мне нужно иметь одно прозрачное наложение, которое можно использовать и повторно использовать на любом изображении по всему сайту. Моя первая попытка была, мягко говоря, окольной. Поскольку я обнаружил, что вы не можете перевернуть невидимый div, я разработал систему сэндвичей, в которой исходное изображение является первым слоем, наложение — вторым слоем, а исходное изображение — снова третьим слоем. Таким образом, при наведении курсора исходное изображение исчезает, открывая наложенное изображение поверх исходного изображения:

http://www.nightlylabs.com/uploads/test.html

Так что это работает. Как бы. Из-за того, что вы не можете взаимодействовать с элементом visible:invisible (почему?!), прокрутка мерцает, пока вы не наведете на нее курсор.

Любая помощь? Этот метод плохой, поэтому, если у кого-то есть лучший, пожалуйста, напишите.


image overlay css hover
person Community    schedule 19.03.2010    source источник
comment
Рассматривали ли вы настройку свойства z-index? Я ничего не тестировал. Я просто думаю вслух.   -  person just_wes    schedule 19.03.2010
comment
z-index работает как надо. мерцание происходит несмотря ни на что; это просто побочный эффект видимости: невидимый.   -  person    schedule 19.03.2010
comment
Кроме того, CSS является обязательным требованием? Не могли бы вы использовать javascript для решения этой задачи?   -  person just_wes    schedule 19.03.2010
comment
Я бы хотел, если это не сложно реализовать. Я также очень плохо разбираюсь в javascript.   -  person    schedule 19.03.2010
comment
Вы должны проверить JQuery. Он имеет множество эффектов, и его относительно легко реализовать.   -  person just_wes    schedule 19.03.2010

Ответы (2)


arrow_upward
2
arrow_downward

Я использовал следующий css и все в порядке.

#container { position:relative; width:184px; height:219px;}
    .image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
    .overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
    .top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
    .top-image:hover { background-image:none;}
person Ali Habibzadeh    schedule 19.03.2010
comment
быстрый вопрос, однако: ie7 это не нравится. Любые идеи? - person ; 19.03.2010
comment
Пожалуйста, объясните, что вы испытываете в ie7, немного подробнее, так как у меня это хорошо отображается в ie7. - person Ali Habibzadeh; 19.03.2010
comment
Немного изменено, но тот же принцип: nightlylabs.com/uploads/test.html работать на ie7. Пришлось изменить его, потому что предыдущий метод был слишком сложным, и мне нужно, чтобы изображение отображалось в разметке, потому что оно генерируется динамически. - person ; 20.03.2010

arrow_upward
0
arrow_downward

Изображение мерцает, потому что вы не можете навести курсор на то, чего нет. Это будет работать, если вы наложили его нормально (z-index не требуется) и сделали его прозрачным, чтобы он все еще отображался и на него можно было навести курсор. Второе изображение не будет мерцать, и вы можете управлять стилем с помощью тега span. Вот некоторые из CSS, которые я использовал:

img.side
    {position:absolute;
    border:1px solid black;
    padding:5px 5px 5px 5px;
    float:center;}
    /*normal base images*/

img:hover+span
        {display:block;}
    /*new images. automatically display beneath base/hover image*/

.side:hover
        {opacity:0;}
    /*base images again, only when hovered over*/

span
        {display:none;
        cursor:pointer;}

Тег hover определяет стиль базового изображения (и базового элемента div), а hover+span определяет стиль изображения, которое появляется только при наведении курсора.

Вот html, полностью показывающий div:

    <div class="only" id="one">
            <img class="side" id="ach" src="ach.svg">Academic</a>
                <span>
                <img class="hovering" id="hach" src="Hach.svg">Academic</a>
                </span>
        </div>

Надеюсь это поможет.

person Hannah    schedule 17.10.2013