3

我找到了这个例子并且能够在这里复制它。问题是它适用于除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>
4

4 回答 4

0

You may use IE8.js

Usage: If you want to support browser IE7+ then integrate thise code into your head tag:

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Or if you downloaded it then you may use this code:

<!--[if lt IE 7]>
 <script src="ie7/IE7.js" type="text/javascript"></script>
<![endif]-->

You can use squish to fix more of your problems. You can do that by adding another line after the 1st include:

 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js" type="text/javascript">

Or

 <script src="ie7/ie7-squish.js" type="text/javascript">
于 2013-06-10T18:11:25.337 回答
0

当然，在页面上抛出modernizr.js，然后添加这个样式：

.no-boxshadow .view a.info:hover {
    outline: 5px solid #aaa;
}

冲洗，重复，IE8 不支持的剩余 css3 样式。

它看起来不那么好，但话又说回来，它是 IE8。

于 2013-06-10T18:11:28.403 回答
0

对于 IE8，您可能需要先制作一个它可以理解的 css，然后如果您真的愿意也可以增强您的过渡效果。（我知道很难说/听到，重做，这只是一个建议，不要在 js 上转发 100% 作为基础）

http://liveweave.com/g4MLe2（我发现只有在线编辑器使用真正的 IE8 独立）

来自IE8的屏幕看看在正版 IE8 中是什么样子 :)

于 2013-06-10T18:48:33.243 回答
0

我今天做了很多搜索，找到了一个解决方案并对其进行了调整以满足我的需求。这是： http: //www.incg.nl/blog/2008/hover-block-jquery/example/animate_hover.html

好吧，代码并没有完全按照我想要的方式工作，因为我无法向它添加单独的链接，所以我对其进行了调整并想出了这个：在以下链接上查看源代码： http://www.iwebarea.net/hoverTest2。 html

于 2013-06-11T04:30:16.873 回答