如何使用jquery在盒子中鼠标悬停时正确变暗和显示文本？

Question

我正在尝试使用css和jquery创建图库。我遇到以下问题： -

1. 当我将鼠标悬停在方框h4上时，所有方框的p与我悬停的方框一起出现。我希望文本只显示在我悬停的那些框上。

2. 我打算用盒子里的背景图片代替盒子。每当我将鼠标悬停在方框背景上时，我的代码都无法正常工作 - 图像不会变暗。

＆＃13;
＆＃13;
$(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");
	});

});
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

使用$(this)定位悬停元素。然后，您可以使用find()来获取所需的元素。

背景颜色：背景颜色属性未被应用，因为它被您提供的内联样式所覆盖。

您可以在CSS中使用!important，但最好在每个.grid元素中使用id，以便从CSS应用背景颜色（非内联）

例如：

而不是：

<div class="grid" style="background:red;">

你可以使用：

<div id="grid_red" class="grid">

并在CSS中：

#grid_red { background-color:red }

背景图片：我们的想法是在每个.image-cover div中添加一个包含.grid类的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>