1

クリック可能なテキストを含むボックスのリストを作成しましたが、IE はリンクの上にテキストを設定するため、テキストにカーソルを合わせると、リンクが機能しなくなります。Chrome + Firefox は意図したとおりに動作します。

また、可能であれば、javascript や jQuery を使用せずに修正できるかどうかを確認したいと思います。IE8+ をサポートするためにも必要です。

ここにjsfiddleがあります。

HTML:

<!DOCTYPE html>
<html>

    <body>
        <ul class="container">
            <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                    tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                    dictum lacinia.</p>
              </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>CLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
        </ul>
    </body>

</html>

CSS:

.container {
    overflow: hidden;
    width: 1000px;
    list-style: none;
    margin: 15px;
    padding: 0;
}
.optionBox {
    float: left;
    overflow: hidden;
    width: 400px;
    height: 125px;
    cursor: pointer;
    margin: 0.3em;
    padding: 0.5em 0.5em 2em 0.5em;
    color: #555;
    background: transparent;
    border: solid 1px #DDD;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.reporting {
    position: absolute;
    background:url('http://s13.postimage.org/w73u674ur/icon.png') no-repeat;
    float: left;
    width:30px;
    height:30px;
}
a {
    position: absolute;
    width: 340px;
    height: 115px;
    font-size: 1.2em;
    padding-left: 3.8em;
    color: #08C;
    text-decoration: none;
}
a:hover{
    text-decoration:underline;
}
p {
    font-size: 1.2em;
    margin: 1.6em 0 0 3.8em;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #333;
}
4

1 に答える 1