Как сделать так, чтобы изображение появлялось при наведении курсора на ссылку

Я пытаюсь создать другое изображение при наведении курсора на каждую ссылку

    <div class = "wrapper">

    <h1>PROJECTS</h1>

    <ul>
    <li><a href = "generation.html">GENERATION ANXIETY</a></li>
    <li><a href = "glitterboy.html">GLITTER BOY COSMETICS</a></li>
    <li><a href = "untitledhuman.html">UNTITLED HUMAN</a></li>
    <li><a href = "bodys.html">BODY(S) UNDER NEGOTIATION</a></li>
    </ul>
    </div>

CSS

ul {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
list-style-type: none;
margin-top: 40;
}

a:hover {
position: relative;
}
a:hover:after {
content: url(Anxiety1%20hover.png); /* no need for qoutes */
position: absolute;
right:0;
}

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

Какие-либо предложения? Спасибо

Ха-ха, установите класс для каждого тега ссылки и используйте разные изображения для наведения каждого из них, как в сообщении кода, довольно просто, да? или чего ты действительно хочешь?

— 14.01.2019 04:01

css

14.01.2019 03:55

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Здесь можно поиграться. Вы можете иметь несколько изображений для каждой ссылки и показывать их при наведении курсора

ul {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  list-style-type: none;
  margin-top: 40;
}

.right {
  float: right;
}

.hidden {
  display: none;
}

a:hover {
  position: relative;
}

a:hover+img {
  display: block;
}

<div class = "wrapper">

  <h1>PROJECTS</h1>

  <ul>
    <li>
      <a href = "generation.html">GENERATION ANXIETY</a>
      <img class = "right hidden" height = "200" width = "200" src = "https://i.imgur.com/0c43ELR.png" />
    </li>
    <li>
      <a href = "glitterboy.html">GLITTER BOY COSMETICS</a>
      <img class = "right hidden" height = "200" width = "200" src = "https://i.imgur.com/lBXHfud.png" />
    </li>
  </ul>

</div>

14.01.2019 04:31

попробуйте использовать псевдоэлемент :after

a:hover:after {
    content: url(imageURL);
    display: block;
}

14.01.2019 04:45

Ответ принят как подходящий

Комбинаторы общего назначения `~`

GSC: ~ означает, что все, что находится справа от ~, следует за тем, что находится слева от ~, стили применяются к правой.

Пример

  <a href='#/' class='A'>A</a> 
  <section class='B'>
      <article class='C'>C</article>
  </section>     
  .A:hover ~ .B .C {color:red}
If you hover over .A then any .B that follows and has a .C nested within it will have its text turn red.

Демо

main {
  position:relative;
}

figure {
  position:absolute;
  right:0;
  top:0;
  width:20vw;
  height: 10vh;
}

img {
  display: none;
  opacity: 0.0;
  transition: 0.5s;
  width:100%;
}

.item {
  font-size: 10vh;
  width: 5vw;
  margin: 5vh;
}

.l1:hover~figure .one,
.l2:hover~figure .two,
.l3:hover~figure .three {
  display: block;
  opacity: 1.0;
  transition: 0.5s
}

<main>
<div class='item l1'><a href='#/'>ONE</a></div>
<div class='item l2'><a href='#/'>TWO</a></div>
<div class='item l3'><a href='#/'>THREE</a></div>


<figure>
  <img src='https://cdn1.wine-searcher.net/images/labels/27/50/finca-bacara-time-waits-for-no-one-jumilla-spain-11002750t.jpg' class='one'>
  <img src='https://static1.squarespace.com/static/53221edce4b0ff54eacdae95/53253064e4b0ba32c23fc68c/53253085e4b05db45c4abdda/1395030141683/Table+for+Two15X30.jpg?format=100w' class='two'>
  <img src='http://th06.deviantart.net/fs71/200H/i/2013/037/1/9/under_the_three_moons_by_timidemerald-d5u03xr.jpg' class='three'>
</figure>
</main>

Рад, что смог помочь, удачного кодирования.

— 15.01.2019 12:27

14.01.2019 05:00