我希望在将鼠标悬停在图像上时更改为其他图像并显示文字。我在悬停时成功转换为另一张图片,但我不知道如何显示文字。我还想自定义文本(颜色,大小,位置)。我的代码:
<section id="works">
<div class="container">
<div class="desktop-12 columns"><div class="border-top"></div></div>
<a href="single-illustration-sidebar-left.html" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Bird</h3>
<span class="category">Illustration</span>
<img src="images/thumb_item01.png" onmouseover="this.src='images/thumb_item01a.png';" onmouseout="this.src='images/thumb_item01.png';"/>
</div><!-- // .item -->
</div><!-- // .desktop-3 -->
<div class="clear"></div>
</a>
</div></section>
&#13;
谢谢。
答案 0 :(得分:1)
使用CSS :hover
显示文本,此处与兄弟选择器+
一起使用
通过使用CSS规则的类,例如.showtext:hover + div
,您只需要一个用于所有文本的文本,与id
相反,每个文本都需要唯一1} p>
根据评论更新
要将文字放在图像顶部,我在它们周围添加了一个包装,并为文本提供了一个位置
.imgwrapper {
position: relative;
}
.showtext + div {
position: absolute;
left: 0;
top: 0;
display: none;
pointer-events: none;
font-size: 24px;
width: 250px;
}
.showtext:hover + div {
display: block;
}
&#13;
<section id="works">
<div class="container">
<div class="desktop-12 columns">
<div class="border-top"></div>
</div>
<a href="single-illustration-sidebar-left.html" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Bird</h3>
<span class="category">Illustration</span>
<div class="imgwrapper">
<img class="showtext" src="http://placehold.it/250" onmouseover="this.src='http://placehold.it/250/0ff';" onmouseout="this.src='http://placehold.it/250';" />
<div>Some text to be shown on top of the image</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
<div class="clear"></div>
</a>
</div>
</section>
&#13;
答案 1 :(得分:1)
在单个查询中使用mousenter
和mouseleave
。
我建议将特定的选择器类.firstImage
应用于您的图片。
$('.firstImage').on({
mouseenter: function (evt) {
$(this).attr('src', 'http://placehold.it/350x350')
$(this).parent('div').css('color', 'red');
},
mouseleave: function (evt) {
$(this).attr('src', 'http://placehold.it/350x150')
$(this).parent('div').css('color', 'blue');
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="works">
<div class="container">
<div class="desktop-12 columns"><div class="border-top"></div></div>
<a href="single-illustration-sidebar-left.html" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Bird</h3>
<span class="category">Illustration</span>
<img src="http://placehold.it/350x150" class="firstImage"/>
</div><!-- // .item -->
</div><!-- // .desktop-3 -->
<div class="clear"></div>
</a>
</div></section>
&#13;
答案 2 :(得分:1)
试试这个:
$(document).ready(function() {
$(".myimg").mouseenter(function(){
$(this).attr({src:"http://kurld.com/images/wallpapers/flower-image/flower-image-18.jpg"});
$(".txt").show();
}).mouseleave(function(){
$(this).attr({src:"https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg"});
$(".txt").hide();
})
})
img {
width: 200px;
height: 100px;
}
.txt {
display: none;
position: absolute;
bottom: 10px;
left: 10px;
background-color: #fff;
}
.wrapper {
position: relative;
}
<section id="works">
<div class="container">
<div class="desktop-12 columns"><div class="border-top"></div></div>
<a href="single-illustration-sidebar-left.html" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Bird</h3>
<span class="category">Illustration</span>
<div class="wrapper">
<img class="myimg" src="https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg" />
<div class="txt">Red Flower</div>
</div>
</div><!-- // .item -->
</div><!-- // .desktop-3 -->
<div class="clear"></div>
</a>
</div></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
答案 3 :(得分:0)
您只需要为该文本“div”提供一个id并将其更新为您的CSS:
img + div {
display: none;
}
img:hover + #ImageText {
display: block;
}
<section id="works">
<div class="container">
<div class="desktop-12 columns">
<div class="border-top"></div>
</div>
<a href="single-illustration-sidebar-left.html" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Bird</h3>
<span class="category">Illustration</span>
<img src="http://placehold.it/50" onmouseover="this.src='http://placehold.it/50/f00';" onmouseout="this.src='http://placehold.it/50';" />
<div id="ImageText">Some text to be shown</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
<div class="clear"></div>
</a>
</div>
</section>