amateur amateur - 2 months ago 11
Javascript Question

How to show an own text block when mouseover on a picture

I am learning html and I want that when we move the mouse into the picture, the elephant will be not shown any more. Instead there is a box (without border) with same size, inside the box there is certain text with blue background.
How should I change my code?

https://fiddle.jshell.net/66j07kyg/

Answer

Well, whatever you want to do with it ;-) here it is:

https://fiddle.jshell.net/8551pyv2/2/

This basically uses display: none versus display: block on hover for both elements, image and text in span (vice versa)

<table align='center'>
        <tr>
        <td class="x"><img src="http://gdbaif.com/images/animal-clipart/animal-clipart-02.jpg" />
    <span class="y">This is some text</span>
        </td>
        </tr>
</table>

CSS

.y {
  display: none;
}
.x {
  vertical-align: top;
}
.x:hover .y {
  display: block;
}
.x:hover {
  background: blue;
  color: white;
  width: 200px;
  height: 200px;
}
.x img {
  width: 200px;
  height: 200px;
}
.x:hover img {
  display: none;
}