我在悬停时有一个可点击的图片我想显示一个关于它的简短描述。 我有一个尝试过使用CSS和jQuery的方法,但是当我悬停而不是保持稳定状态(静态)时它似乎闪闪发光。
HTML
<a href="#" class="project">
<img src="images/valencia.png"/>
</a>
<a href="#" class="description">
<p>In this website you find information about sport and gastronomy in Valencia. It was built for the Erasmus+ Project.</p>
</a>
CSS
a.project img {
height: 150px;
width: 200px;
border-radius: 5px;
border: 1px solid #fff;
}
a.description {
text-decoration: none;
}
a.description {
height: 150px;
width: 200px;
background-color: white;
color: black;
border-radius: 5px;
opacity: 0.8;
position: absolute;
top: 0;
left: 90px;
right: 0;
bottom: 0;
visibility: hidden;
}
a.description p {
margin-top: 35px;
}
的jQuery
$('a.project img').mouseover(function(){
$('a.description').css("visibility","visible");
});
$('a.project img').mouseout(function(){
$('a.description').css("visibility","hidden");
});
答案 0 :(得分:0)
我会尝试.hover
:
$('a.project img').hover(function(){
$('a.description').css("visibility","visible");
});
而非测试.mouseover
和.mouseout
。
答案 1 :(得分:0)
这是一个可以帮助您解决问题的示例。
https://stackoverflow.com/a/16971934/3585278
值得记住的是,如果您正在处理事物的外观,那么很有可能应该在CSS中完成(从长远来看,这将使您的生活更轻松)。
我在这里嘲笑了一个例子:http://jsfiddle.net/HAcE2/
您基本上需要创建一个悬停时出现的框。通过使用position:absolute,您可以让框显示在顶部并使用CSS我们可以在我们将鼠标悬停时显示。
.wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#f00;
background-color:rgba(255,255,255,0.8);
width: 100px;
height: 100px;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
}
img {
z-index:1;
}