我有以下代码:

的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弄乱了我。

伙计们,我该怎么办?先感谢您。

最佳答案

如果希望悬停的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>

10-05 20:37
查看更多