我怎样才能在不使用 javascript 的情况下做到这一点？答案

【问题标题】：How can I accomplish this without use of javascript?我怎样才能在不使用 javascript 的情况下做到这一点？
【发布时间】：2011-10-27 11:26:17
【问题描述】：

我有一个带有缩略图的页面（更多内容即将发布，因此 float:left 属性是必需的）。缩略图是一个 Div，其中有一个锚点，该锚点是一个图像和一些文本。文字在图片下方。 ancho 链接到 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;
}

文本下划线默认来自样式表的另一部分。

我可以不用javascript吗？

由 Chris 解决（选择的答案）。这是他的解决方案，我的拇指在摆弄......

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

【问题讨论】：

标签： css hover pseudo-class

【解决方案1】：

改用.form-wrapper 上的:hover 状态。

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

【讨论】：

哎呀，看错了你的帖子，所以我删除了我的第一条评论。但是，它仍然不起作用，因为表单包装器会在整个拇指周围加上一个边框，包括标题，我也不想要标题周围的边框。 :?
你是对的。它需要分成两个语句。查看编辑和 jsfiddle。
是的！刚刚使用您提供的新 CSS 更新了网站。谢谢你！另外...检查我的原始问题以获取指向您的小提琴的链接...我对其进行了更新，使其看起来像我的拇指在他的网站上。
很高兴听到这个消息！乐意效劳。 :)

【解决方案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;
}

【讨论】：