Используя hover()
а так же animate()
написал скрип чтобы при наведении на ссылку появлялся <span>
с текстом. Но столкнулся с проблемой - при отводе мыши <span>
никуда не исчезает. В чем проблема?
$('.animate-visible-1').hover(function() {
$('.view-project-hover-1').stop().animate({
opacity: 1,
marginTop: "0px",
marginBottom: "7px"
}, 500);
});
span.view-project-hover {
display: block;
font-family: 'Futura PT';
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
text-align: left;
color: #000;
padding-top: 10px;
opacity: 0;
margin-top: 7px;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="animation-element">
<a class="photo-model animate-visible-1" href="#"><img src="img/stasha-homepage.jpg" alt=""></a>
<div class="portfolio-preview-text-wrapper">
<a class="portfolio-preview-category-link" href="#">фото</a>
<h3><a class="animate-visible-1" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolorum.</a></h3>
<span class="view-project-hover view-project-hover-1">открыть проект</span>
</div>
</li>