我想在鼠标悬停时为我的三张图片添加叠加层。我相信最好在创建 div 后使用 jQuery。但是，当我向我的布局添加一个新的 div 时(在我的代码中的每个 <img> 下方)我的布局搞砸了；如果我尝试添加任何 <div>，则从水平列表变为垂直列表在我的下方 <img> .
我主要是想把叠加层放在那里。我确定我可以弄清楚鼠标悬停操作，但主要问题是我无法生成初始叠加层
stackoverflowers:请帮我添加一个最终透明的叠加 div。
home.html 我已经注释掉了放置覆盖 div 的尝试
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
<a href="#">PROGRAM</a>
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li><a href="#">LOGIN</a>
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
样式表.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
包含 jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
最佳答案
根据评论
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
代码
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
演示
关于javascript - 为 3 <img> 的水平行创建透明覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29715073/