Question

            <div class='col-md-4'>
                <div class="thumbnail">
                    <img src="media1/thumb3.jpg">
                    <div class="caption">
                        <h3>Lorem Ipsum</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <a href="www.twitter.com" ><span class="sosa" style="font-size: 20px;">t</span></a><a href="www.linkedin.com" ><span class="sosa" style="font-size: 20px;">ļ</span></a>
                    </div>
                </div>
            </div>

这是我的CSS

.thumbnail img{
    width: 300px;
    height: 300px;
    border-radius: 150px;
}

.thumbnail {
    border:none;
}

.thumbnail:hover {
    background-color: #F2F3F4; 
}

当我将鼠标悬停在缩略图而不是整个缩略图（标题等）时，我想仅为图像添加边框。有没有办法用css做到这一点？

Answer 1

为图片指定一个id，例如id =＆＃34; image＆＃34;

在jquery中使用

    <script>
     $(document).ready(function(){
$('.thumbnail').mouseover(function(){
    $('#image').css("border","2px solid black");
  });});
$(document).ready(function(){
$('.thumbnail').mouseout(function(){
    $('#image').css("border","0px");
  });});

    </script>

不要忘记包含运行jquery所需的jquery脚本： -

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Answer 2

如果缩略图div在img之前关闭，那么你可以这样做。见这个

On a CSS hover event, can I change another div's styling?

Answer 3

只需设置此样式：

.thumbnail:hover img {
    border: solid 5px green;
    margin: -5px;
}

保证金是为了避免“改变位置”效应

demo

Answer 4

如果你想在悬停使用时更改边框：在这种情况下将鼠标悬停在元素上我们将使用此代码

.thumbnail img:hover {
    border: 3px solid #dddddd;
}

控制changin位置添加一个厚度与正常状态相同的白色边框

.thumbnail img {
    border: 3px solid #ffffff;
}

完整的代码将是

.thumbnail img {
    border: 3px solid #ffffff;
}
.thumbnail img:hover {
    border: 3px solid #dddddd;
}

当我将鼠标悬停在缩略图上时，仅为图像添加边框

4 个答案: