html - 将两个 div 合并为一个 div 以应用悬停效果

Question

我有以下代码:

HTML

<div class="row">
    <label id="my-button">
        <div class="par">
            <div class="col"><div class="circular"></div></div>         
            <div class="col"><h2>Text1</h2></div>
        </div>
    </label>
    <label id="my-button2">
        <div class="par">
            <div class="col"><div class="circular"></div></div>         
            <div class="last"><h2>Text2</h2></div>
        </div>
    </label>
</div>
... (more rows)

CSS

.circular {
    width: 105px;
    height: 105px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(imgs/desktop.jpg) no-repeat;
    background-size: contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 20px 20px;
}

h2{
    font-family: 'Georgia', serif;
    font-size: 2em;
    color: #2B1C1C;
    transform: translate(-15%,170%);
}

.col{
    float: left;
    width: 25%;
}

.last{
    float: right;
    width: 25%;
}
.row{
    height: auto;
    overflow: auto;
}

所以，我们的想法是，在 CSS 中使用这个“表格”，在 div 中显示一些图像，并在它们旁边显示一些文本。一张图片，一段文字。 CSS 代码主要是对图像进行一些很酷的效果。

我正在尝试将每对图像和文本分组到一个 div (class="par") 中以为其添加悬停效果。

我尝试了在这里找到的每一个帖子以及在互联网上找到的其他几个帖子。我不知道我还应该做什么。可能是我的 CSS 弄乱了我。

伙计们，我能做什么？提前谢谢你。

Answer 1

如果您希望鼠标悬停时的 div 影响子项，请使用 CSS 后代选择器。

.par {
}

.circular {
  background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
  width:100px;height:100px;
  
  opacity: 1;/*this is important*/
  transition: opacity 0.2s linear;/*for a fade effect*/
}

.par:hover .circular {
  opacity: 0;/*this is the result value*/
}

.par:hover {
  background-color:red;
}

<div class="par">
   <div><div class="circular"a</div></div>
   <div>Text1</div>
</div>