Post to admins
Post to admins
Hi learners and admins. There's a big problem jquery's with css. I'll share code and I want to run the code yourself. you'll see the problem.
CSS
- .box .bio {
- position: absolute;
- top: 400px;
- left: 20px;
- text-decoration: none;
- color: #fff;
- padding: 10px 15px;
- border:1px solid #fff;
- background-color: rgba(250,250,250, 0.3);
- box-shadow: 0 0 4px rgba(0,0,0, 0.5);
- border-radius: 5px;
- transition: all 0.2s ease-in-out;
- display: none;
- }
- .box .bio:hover {
- background-color: transparent;
- }
HTML
- <div class="box">
- <img src="img.jpg" class="img">
- <a href="" class="bio">Biography</a>
- <ul>
- <li><i class="fas fa-user-circle"></i><span>Aysha Mamedi</span></li>
- <li><i class="fas fa-map-marker-alt"></i><span>New York</span></li>
- <li><i class="fas fa-star-of-life"></i><span>Software Engineer</span></li>
- <li><i class="fas fa-hourglass-start"></i><span>20</span></li>
- <li><i class="fas fa-file-signature"></i><span>aysha@mamedi.com</span></li>
- </ul>
- </div>
Script (JQuery
)
- <script type="text/javascript">
- $(document).ready(function(){
- $("img").hover(function(){
- $("a.bio").slideToggle(300);
- }).mouseleave(function(){
- $("a.bio").slideUp(300);
- });
- });
- </script>
Wait your answers and solves.