悬停在div上的效果，同时悬停在整个标签上[重复]

Question

好的，我正在尝试在我的 div 上获得悬停效果 (<div class="thumbnail-green-test">) 我可以简单地做到这一点（下面的代码）

我需要的是 div (<div class="thumbnail-green-test">) 如果使用悬停在 H3 以及 div 上，但只有div 上显示的效果。

部分工作

html

 <div class="col-md-3">
            <a href="#tab4" data-toggle="tab">
                <div class="thumbnail-green-test">
                    here be image
                </div>
                <h3 class="">test</h3>
            </a>
        </div>

css

.thumbnail-green-test:hover {
    border: 10px solid hotpink !important;
}

我尝试过的

这并没有给我我想要的它给整个区域的效果，我只想要*div with "image be here"* 上的边框，但如果你将鼠标悬停在整个部分上就会出现。

html

<div class="col-md-3">
            <div class="thumbnail-green-test">
            <a href="#tab4" data-toggle="tab">
                <div class="">
                    here be image
                </div>
                <h3 class="">test</h3>
            </a>
        </div>
    </div>

Answer 1

div.col-md-3:hover .thumbnail-green-test {
  border: 10px solid hotpink !important;
}

<div class="col-md-3">
  <a href="#tab4" data-toggle="tab">
    <div class="thumbnail-green-test">
      here be image
    </div>
    <h3 class="">test</h3>
  </a>
</div>

Answer 2

您只能使用 css 来做到这一点

.col-md-3:hover .thumbnail-green-test {
   border: 10px solid hotpink !important;
}

或使用jquery

$('.col-md-3').mouseenter(function(){
    $('.thumbnail-green-test').css({"border-color": "hotpink", 
             "border-width":"10px", 
             "border-style":"solid"});
});
$('.col-md-3').mouseleave(function(){
    $('.thumbnail-green-test').removeAttr( 'style' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
            <a href="#tab4" data-toggle="tab">
                <div class="thumbnail-green-test">
                    here be image
                </div>
                <h3 class="">test</h3>
            </a>
        </div>