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

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="image"

并且在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>