Question

我找到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>

Answer 1

您可以使用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]-->

您可以使用挤压来解决更多问题。您可以通过在第一个包含后添加另一行来执行此操作：

 <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">

Answer 2

当然，在页面上抛出modernizr.js，然后添加这种风格：

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

冲洗，重复，以获取IE8不支持的其余css3样式。

它看起来不会那么好，但话说再来一次，它是IE8。

Answer 3

对于IE8，您可能需要首先制作一个它理解的CSS，然后如果您真的希望也可以增强过渡效果。（我知道很难说/听到，重做它，这只是建议不要以js为基础接受100％的基础）

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

screen from IE8 看看它在真正的IE8中的含义：）

Answer 4

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

嗯，代码没有按照我想要的方式工作，因为我无法添加单独的链接，所以我调整了它并提出了这个：查看以下链接的来源：http://www.iwebarea.net/hoverTest2.html

CSS悬停效果链接在IE8中不起作用

4 个答案: