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

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

2 голосов
/ 19 марта 2010

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 19 марта 2010

Я использовал следующий 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;}
0 голосов
/ 17 октября 2013

Изображение мерцает, потому что вы не можете навести курсор на то, чего там нет. Он будет работать, если у вас есть обычный слой (не требуется 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 определяет стиль базового img (и базового div), а hover + span определяет стиль img, который появляется только при наведении курсора.

Вот 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>

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

...