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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您只能使用css

执行此操作

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

或使用jquery

＆＃13;

$('.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' );
});

＆＃13;

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

＆＃13;

将鼠标悬停在整个标记上时，将鼠标悬停在div上

2 个答案: