如何使用jquery正确地将文本暗化并显示在框中的鼠标上？
如何使用jquery正确地将文本暗化并显示在框中的鼠标上？
提问于 2015-01-19 08:19:56
我正在尝试使用css和jquery制作图片库。我有以下问题：
- 当我悬停在盒子上时，所有盒子的h4和p都会随着我悬停的盒子一起出现。我希望文本只出现在我悬停的那些框上。
- 我将在盒子里使用背景图像，而不是盒子。每当我在框背景上悬停时，我的代码就无法工作--图像不会变暗。
$(document).ready(function(){
$(".grid").mouseover(function(){
$(this).addClass("darkbackground");
$(".grid h4,.grid p").css("display","block");
});
$(".grid").mouseout(function(){
$(".grid h4,.grid p").css("display","none");
$(this).removeClass("darkbackground");
});
});.image-grids{
width: 100%;
display: table;
}
.image-grids-row{
display: table-row;
width: 100%;
}
.grid{
width: 25%; /**********In responsive design make it 50%;**********/
height: 300px;
display: table-cell;
border: 1px solid black;
}
.grid h4,.grid p{
display: none;
padding: 10px;
}
.darkbackground{
background: rgba(0,0,0,0.5);
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-grids">
<div class="image-grids-row">
<div class="grid" style="background:red;">
<h4>Ibiza</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="grid" style="background:yellow;">
<h4>New Zealand</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="grid" style="background:green;">
<h4>Goa</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="grid" style="background:pink;">
<h4>Maldives</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-01-19 08:21:54
使用$(this)来锁定悬停元素。然后可以使用find()获取所需的元素。
Background-color:背景色属性没有得到应用，因为它是由您给出的内联样式编写的。
您可以在CSS中使用!important，但最好在每个.grid元素上使用id，以便从CSS中应用背景色(而不是内联)
例如：
而不是：
<div class="grid" style="background:red;">您可以使用：
<div id="grid_red" class="grid">在CSS中：
#grid_red { background-color:red }Background-image:的想法是在每个.grid div中放置一个带有类.image-cover的div，并给他们一个position:absolute。另外，向每个position:relative元素提供一个.grid。然后，在.grid:hover上，应用rgba(0,0,0,0.3)的背景色。检查第一个div，然后自己继续。
$(document).ready(function(){
$(".grid").mouseover(function(){
$(this).addClass("darkbackground");
$(this).find("h4").css("display","block");
$(this).find("p").css("display","block");
});
$(".grid").mouseout(function(){
$(".grid h4,.grid p").css("display","none");
$(this).removeClass("darkbackground");
});
});.image-grids{
width: 100%;
display: table;
}
.image-grids-row{
display: table-row;
width: 100%;
}
.image-cover {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.darkbackground .image-cover {
background-color: rgba(0,0,0,0.3)!important;
}
#grid-one {
background-image: url('http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png');
}
.grid{
width: 25%; /**********In responsive design make it 50%;**********/
height: 300px;
display: table-cell;
border: 1px solid black;
position: relative;
}
.grid h4,.grid p{
display: none;
padding: 10px;
}
.darkbackground{
background-color: rgba(0,0,0,0.5)!important;
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-grids">
<div class="image-grids-row">
<div id="grid-one" class="grid">
<h4>Ibiza</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
<div class="image-cover"></div>
</div>
<div class="grid" style="background:yellow;">
<h4>New Zealand</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="grid" style="background:green;">
<h4>Goa</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
<div class="grid" style="background:pink;">
<h4>Maldives</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28020395
复制相关文章
相似问题
腾讯云开发者
