Question

我有一个带有缩略图的页面（更多内容，因此需要float：left属性）。缩略图是Div，其中包含一个锚点，其中锚点是图像和一些文本。文字在图像下方。 ancho rink到pdf文件。简单。

http://www.bridgecitymedical.com/forms

问题是，当您将鼠标悬停在悬停在其上时，文本会在悬停时加下划线，并且当您将鼠标悬停在拇指图像上时，拇指图像会出现边框并且文本会加下划线。我需要的是，然后将鼠标悬停在文本或图像上，以便他们同时应用各自的悬停状态，例如：图像得到一个边框，文字加下划线。目前他们自己运作，但他们需要成为一个，或者只是看起来很奇怪。

这是标记：

<div class="form">
    <a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
        <div class="form-wrapper">
        <div class="form-thumb">
            <img src="/forms/thumbs/1.jpg" alt="" />
        </div>
        Caption
        </div>
    </a>
</div>

和css ......

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}
.form-thumb:hover{
    border: 1px solid #000;
}

默认情况下，文本下划线来自tylesheet的另一部分。

我可以在没有javascript的情况下执行此操作吗？

克里斯解决（选定答案）。这是他的解决方案，我的拇指在小提琴......

http://jsfiddle.net/7MLjZ/1/

Answer 1

使用:hover上的.form-wrapper状态代替。

<div class='wrap'>
    <div class='thumb'></div>
    Text!
</div>



.wrap{width:60px; height:80px;}
.thumb{width:60px; height:60px; background-color:blue;}
.wrap:hover{text-decoration:underline;}
.wrap:hover .thumb{border:5px solid black;}

http://jsfiddle.net/7MLjZ/

Answer 2

这应该可以使图像的div边框和标题的文字在悬停时变黑：

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}

.form:hover .form-wrapper .form-thumb {
    border: 1px solid #000;
}

a:hover {
    color:#000;
}

如何在不使用javascript的情况下完成此操作？

2 个答案: