0

Quero fazer um efeito com o JavaScript, ao passar o mouse em cima da imagem é preciso que apareça a legenda e ao retirar o mouse quero que a mesma fique oculta. No entanto, não consigo chegar ao resultado desejado. Já coloquei os eventos dentro da div, porém o que fica oculto quando retiro o mouse é a imagem e não a legenda.

function descricao(){
	document.getElementById("sublime").style.display='block';
}

function retira(){
	document.getElementById("sublime").style.display='none';
}
#sublime{
	opacity: 1;
	width: 100%;
	height: 382px;
	background-image: url(imagens/sublime.png);
	box-shadow: 1px 1px 4px black;
}

#sublime:hover{
	opacity: 0.5;
	transition: 1s;
}

#sublime p {
	font-size: 100px;
	color: black;
}
@media(max-width: 800px){
	.corpo2{
		width: 90%;
		margin: 0 auto;
	}

	.corpo2 h3{
		margin-left: 13%;
	}

	#sublime{
		width: 330px;
		height: 191px;
		background-image: url(imagens/sublime2.png);
	}
}
<div id="sublime">
  <p style="display: none" onmouseover="descricao()"      onmouseout="retira()">Sublime Net, projeto de Tecnologia de negócios na internet. joaovitorleffa.github.io</p>
</div>

1 Resposta 1

0

Você não precisa fazer com javascript, pode usar o atributo title na imagem:

<img src="sublime2.png"  title="Sublime Net, projeto de Tecnologia de negócios na internet. joaovitorleffa.github.io"/>

E você pode usar o title em outras coisas também: <div>, <input>, <a>...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .