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

Question

我正在尝试使用 css 和 jquery 制作图片库。我遇到以下问题:-

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

2. 我将在盒子中使用背景图像而不是盒子。每当我将鼠标悬停在框背景上时，我的代码都不起作用 - 图像不会变暗。

$(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>

Answer 1

使用 $(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。此外，为每个 .grid 元素提供一个 position:relative。然后，在 .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>