我找到了 this example并且能够复制它here .
问题是它适用于除 IE8 之外的所有浏览器。有人可以帮助让它在 IE8 中工作或做类似的事情吗？我什至会采用 jQuery 解决方案。
我有 7 张图片将显示在页面正文中，当用户滚动图片时，应该会出现 7 或 8 个链接。有什么想法吗？
我也会对 jQuery 解决方案感到满意。下面的代码。我复制并粘贴了 CSS 文件的内容
CSS
<style>
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
</style>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr-min.js"></script>
<![endif]-->
<style type="text/css">
@import url('hoverStyle.css');
</style>
</head>
<body>
<div class="view view-first">
<img alt="Year In Review" src="YearInReview.png" />
<div class="mask">
<h2>Title</h2>
<p>Your Text</p>
<ul>
<li><a href="#" class="info">Link 1</a> </li>
<li><a href="#" class="info">Link 2</a> </li>
<li><a href="#" class="info">Link 3</a> </li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
您可以使用 IE8.js
用法: 如果您想支持浏览器 IE7+，请将此代码集成到您的 head 标签中:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
或者，如果您下载了它，那么您可以使用此代码:
<!--[if lt IE 7]>
<script src="ie7/IE7.js" type="text/javascript"></script>
<![endif]-->
您可以使用squish 来解决更多问题。您可以通过在第一个 include 之后添加另一行来做到这一点:
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js" type="text/javascript">
或者
<script src="ie7/ie7-squish.js" type="text/javascript">
关于jquery - 带有链接的 CSS 悬停效果在 IE8 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17029949/