Question

在里面标题和文字。当div徘徊时，背景会发生变化，并且“toast”会从div的底部上升。可以根据标题链接点击整个div，并在css中完成。

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

<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;
}

Answer 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/

Answer 2

一种解决方案是在h3外移动'a'。 IE在“p”标签后面有一个问题。

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

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

css - 整个div是div内部的链接 - 可点击 - 包括小提琴

2 个答案: