Question

我想要一个包含4个不同背景图像的页面。在鼠标悬停时，它应该模糊图像并显示文本。点击它应该重定向到不同的HTML文件。请帮忙！

<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
 $("#div1").hover(function(){
$(this).css("opacity", "0.5");
});
});
</script>
<title>Background Image in Quadrants</title>
<style type="text/css">
.tl { position: absolute; top: 0; left: 0; right: 50%; bottom: 50%; 
      background: url(pic1.jpg) no-repeat;background-size: 100% 100%;     border:solid #000; border-width: 0 10px 10px 0; }
.t2 { position: absolute; top: 0; left: 50%; right: 0; bottom: 50%; 
      background: url(pic1.jpg) no-repeat;background-size: 100% 100%;     border:solid #000; border-width: 0 0 10px 0; }
.t3 { position: absolute; top: 50%; left: 0; right: 50%; bottom: 0; 
      background: url(pic1.jpg) no-repeat;background-size: 100% 100%;     border:solid #000; border-width: 0 10px 0 0; }
.t4 { position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; 
      background: url(pic1.jpg) no-repeat;background-size: 100% 100%;     border:solid #000; border-width: 0 0 10px 0; } 
</style>
</head>
<body>

<div id="div1" class="tl"></div>
<div id="div2" class="t2"></div>
<div id="div3" class="t3"></div>
<div id="div4" class="t4"></div>
</body>
 </html>

鼠标悬停图像以模糊图像和显示文本

0 个答案: