Только CSS - поменяйте местами изображение и добавьте ссылку - PullRequest
Новая
       1

Только CSS - поменяйте местами изображение и добавьте ссылку

0 голосов
/ 07 ноября 2018

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

В связи с тем, что это нужно делать только через CSS, это связано с тем, что я хочу, чтобы это работало по электронной почте, а Javascript удален.

Это понятнее? Спасибо. 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            #example-five {
                position: relative;
            }
            #example-five-checkbox {
                display: none;
            }
            #example-five-checkbox:checked + #example-five:after {
                content: '<img src = "https://via.placeholder.com/150?text=Hide" />';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: white;
             }
        </style>
    </head>
    <body>
        <input type="checkbox" id="example-five-checkbox" />
        <label id="example-five" for="example-five-checkbox"><img src = "https://via.placeholder.com/150?text=Show" /></label>
    </body>
</html>

1 Ответ

0 голосов
/ 07 ноября 2018

Здесь мы можем использовать псевдокласс :target.

Расположите контейнеры с изображениями абсолютно в родительском контейнере, расположив их сверху слева. Дайте 2-му изображению с внешней ссылкой z-index, которое обычно покрывает первое изображение. Теперь скройте 2-е изображение с помощью display:none. Добавьте ссылку с первого изображения на id второго изображения.

Это зависит от того, насколько второе изображение достаточно велико, чтобы покрыть первое. 

#container {position:relative;}
#image1 {position:absolute;
  top:0;
  left:0;
  z-index:1;
}

#image2 {position:absolute;
  top:0;
  left:0;
  z-index:2;
  display:none;
}

#image2:target {
  display:inline-block;
}
<div id="container">
  <div id="image1">
    <a href="#image2"><img src="https://via.placeholder.com/150?text=Show" /></a>
  </div>
  <div id="image2">
    <a href="//www.google.com"><img src="https://via.placeholder.com/150?text=To Goole.." /></a>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...