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

debugcn 发表于 Dev

本杰明燕麦

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

不过，我需要的是div （<div class="thumbnail-green-test">），如果将鼠标悬停在H3div和div上，则要具有悬停效果，但是只有在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>

安德烈·费多罗夫（Andrey Fedorov）

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。