pictures show description when mouseover on a separate div

Question

pictures show description when mouseover on a separate div

Navigation

#1 by (2 votes)

2

I want to put one image next to the other and when you hover the mouse over it appears a description in a separate column of the site, if there is no way it can be the same since to put an image next to the other and the descriptions do not disfigure the images on the side when you give hover

If you do not give in html can you help me in javascript ... CSS q to using:

.descricao, descricaodois{
    display: none;
}
.item:hover .descricao, .itemdois:hover .descricaodois{
    display: block;
}

html:

<span class="item"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a><spanclass="descricao">Recomendado a todas as idades</span>
</span>
<span class="itemdois"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a><spanclass="descricaodois">Hoje o dia pode ser seu</span>
</span>

When passing the mouse the description affects the image on the side so I wanted to leave it in a different div or span separated from the image ...

javascript html

asked by anonymous 18.08.2018 / 02:19

1 answer

SQL with associated data in Laravel? Synchronization in two ajax

score 2 · Accepted Answer

You can do with javascript directly on the element or separate

The descriptions are in%% of separated%

No element:

.descricao, .descricaodois{
    display: none;
}

<span class="item" onmouseover="document.getElementById('des1').style.display='block'" onmouseout="document.getElementById('des1').style.display='none'"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a></span><spanclass="itemdois"  onmouseover="document.getElementById('des2').style.display='block'" onmouseout="document.getElementById('des2').style.display='none'"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a></span><divid="descricoes">
<span class="descricao" id="des1">Recomendado a todas as idades</span>
<span class="descricaodois" id="des2">Hoje o dia pode ser seu</span>
</div>

Separate script:

document.getElementsByClassName("item")[0].onmouseover = function(){document.getElementsByClassName("descricao")[0].style.display="block";}
document.getElementsByClassName("item")[0].onmouseout = function(){document.getElementsByClassName("descricao")[0].style.display="none";}
document.getElementsByClassName("itemdois")[0].onmouseover = function(){document.getElementsByClassName("descricaodois")[0].style.display="block";}
document.getElementsByClassName("itemdois")[0].onmouseout = function(){document.getElementsByClassName("descricaodois")[0].style.display="none";}

.descricao, .descricaodois{
    display: none;
}

<span class="item" onmouseover="document.getElementById('des1').style.display='block'" onmouseout="document.getElementById('des1').style.display='none'"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a></span><spanclass="itemdois"  onmouseover="document.getElementById('des2').style.display='block'" onmouseout="document.getElementById('des2').style.display='none'"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a></span><divid="descricoes">
<span class="descricao">Recomendado a todas as idades</span>
<span class="descricaodois">Hoje o dia pode ser seu</span>
</div>