Picture appears when hovering over text

Question

Picture appears when hovering over text

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

I'm making a website for a pizzeria and I need to see an image of the corresponding pizza next to the pizza on the menu (text).

html css hover

asked by anonymous 01.11.2017 / 15:51

2 answers

PHP form for email: sending arrives, but the filled data does not How to do a split of an integer inside string?

score 1 · Answer 1

I made an example using only CSS , I left the commented code for a better understanding, follow the code below and some references:

: hover

Combinator ~

Display property

/* Defino o tamanho de todas as imagens */
img { 
  width: 50px;
}

/* Oculto a imagem de id igual a "img2" */
#img2 {
    display: none;
}

/* Ao passar o mouse na img1 a img2 será exibida alinhada */
#img1:hover ~ #img2 {
    display: inline;
}

<div>
  <img id="img1" src="https://image.freepik.com/vetores-gratis/fundo-lobo-uivando-na-lua_23-2147645253.jpg"/><imgid="img2" src="https://image.freepik.com/vetores-gratis/lobo-que-urra-o-fundo_1355-15.jpg" />
</div>

score 0 · Answer 2

You have N ways to do this, you can only use CSS , or you can use JS .

A simple example of doing with jQuery is:

$('ul li span').on('mouseover', function(){
  $(this).next().show()
})

$('ul li span').on('mouseout', function(){
  $(this).next().hide()
})

ul li img{
  display: none;
  width: 50px;
}

ul li span{
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><span>Pizza1</span><imgsrc="http://www.corpoealma.com/wp-content/uploads/2017/08/pizzabar.jpg">
  </li>
  <li>
    <span>Pizza 2</span>
    <img src="http://bhdicas.com/wp-content/uploads/2017/03/pizza-site-or.jpg">
  </li>
</ul>