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>

Answer 2

您可以添加类似的内容，为所有.par孩子添加悬停效果：

.par:hover *{
 background-color:blue;   
}

这是fiddle

两个div成div来应用悬停效果

2 个答案: