0

带有标题和文本的 div。当 div 悬停时，背景会发生变化，并且会从 div 的底部升起一个“toast”。整个 div 可以根据标题链接点击并在 css 中完成。

问题：在所有版本的 IE 中，只有当光标不在 div 内的文本上时，链接才可点击（小提琴示例中的问题相同）。它可以在 FF、Opera 和 Safari 中正常工作。

JSFiddle -示例

<div class="one-third">
    <div class="inside">
        <h3><a href="/#">Testing</a></h3>
        <p>This some text inside the testing blox blah blah blah blah blah.</p>
        <p>and some more and some more.and some more and some morep>and some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some more.</p>
        <span class="toast">View more stuff</span>
    </div>
</div>

CSS：

.one-third{
    border:1px solid #d8d8d8;
    margin:35px 9px 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:#ffffff;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor: pointer;
    padding:25px 0 0 0;
}

.one-third:hover{ 
    background: #eeeeee;
}

.inside{
    height:185px;
}

.inside h3 a, .inside h3 a:hover{ /*entire div is link*/
    font-size: 20px;
    color:#30629a;
    text-decoration:none;
    position:absolute; 
    width:100%;
    height:100%;
    top:13px;
    left: 0;
    z-index: 1;
}

.inside p{
    padding:15px 15px 0 15px;
}


.toast{
    background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .7);
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -30px;
    line-height:30px;
    color: #fff;
    text-shadow:0 1px 1px #111111;
    font-size:14px;
    text-align: center;
    transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
    bottom: 0;
}
4

2 回答 2

1

另一种解决方案是添加

background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

到.inside h3 a，.inside h3 a：悬停。这是一个base64透明gif，解决了IE的问题。

GIf 在这里找到：http ://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

于 2012-11-28T02:09:19.107 回答
0

一种解决方案是如果 h3 将 'a' 移到外面。IE 在“p”标签后面的那个元素有问题。

<a href="/#"><h3>Testing</h3>
<p>...</p></a>

http://jsfiddle.net/Zp2Rp/14/

于 2012-11-27T06:17:14.467 回答