Show Details On Mouse Hover Using CSS HTML
This will show details of an option when the mouse pointer is on that specific option.
This is First Option
here is some description
This is Second Option
here is some description
This is Third Option
here is some description
This is Fourth Option
here is some description
This is Fifth Option
here is some description
Download The Complete Code From here
The HTML Code is:
<body>
<div class="main">
<p class="option" onclick="foo()">This is First Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo()">This is Second Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo()">This is Third Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo()">This is Fourth Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo()">This is Fifth Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Take Pointer on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>
</body>
CSS Code:
<style>
body{background-color:wheat;}
.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}
.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}
.dec{background-color: whitesmoke;padding: 5px;display: none; }
.option:hover + .dec{display: block;}
.dec:hover{display: block;}
</style>
Post a Comment