Question

我有两个班级，.growImage和.footer。将鼠标悬停在包含图像的div上时，图像将遵循以下CSS ...

.growImage:hover {
transform:scale(1.5,1.5);
transform-origin:0 0;
}

并且它有效......但是CSS下面就是这个......

.growImage:hover ~ #footer {
height:1000px;
}

并且它应该扩大页脚的高度，但它不会。请注意我已尝试将它们转换为ID'S（#example），并将它们转换为常规类（.example），这些都不起作用。我尝试将important!添加到更改属性，但也无效。最令人困惑的是，我开始了一个新的html网页并制作了空白的div，其中不包含任何内容和最小的属性，上面的代码也适用于那些，那么为什么它不能在我正在处理的当前网页上工作呢？

这是HTML ...

<div class="growImage"><img src="images/familyTree.jpg" width="333px" height="250px"/></div>

<div class="footer">
This is the footer.</div>

这是CSS ...

.footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}

.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}

.growImage:hover ~ .footer {
height:1000px;
}

对不起，我之前应该包括这个，但这是CSS的其余部分......

#container{
height:920px;
width:960px;
background-color:#000;
margin:auto;
display: block;
float: none;
}
#header{
height:100px;
width:960px; 
float:left;
background-color:white;
}
#navigation{
height:100px; 
width:660px; 
font-size:30px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
}
#logo{
height:100px;
width:300px; 
float:left;
background-color:white;
}
#body{
height:770px;
width:920px;
background-color:#0081c3;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
float:left;
}
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
html{
/*background-color:#ffd636;*/
background-image:url(images/background.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
a:Link{ 
text-decoration:none; 
}
a:visited{
text-decoration:none; 
}
a:hover{
text-decoration:none; 
}
a:active{
text-decoration:bold; 
}
img{
   border-style: none;
}
.buttonBorder{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ffd636;
}
.buttonSelected{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ed3133;
}
.buttonBorder:hover{
color:#ffd636;
background-color:white;
}
td{
width:150px;    
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}

Answer 1

我尝试了id和class。它没有显示任何问题。但你应该这样实现，因为css scale不是最好的主意，因为它会重叠兄弟元素。尝试使用高度:(如果你想在悬停时看到完整的图像）或将父元素溢出设置为隐藏点击这里

#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}

/* This rule added just for testing purpose only */
 div#footer {
 background:green;
   transition-duration:.5s;
 
 }
/* overflow avoid overflow of child elements when hovering */
#growImage{
  overflow:hidden;
}
#growImage:hover img{
transform:scale(1.5,1.5);
transform-origin:0 0;
  transition-duration:.5s;
}

#growImage:hover ~ #footer {
height:1000px;
}

<div id="growImage">
  <img src="http://devgene.com/wp-content/themes/devgene/assets/img/tba-mobile.png" width="333px" height="250px"/>
</div>

<div id="footer">
This is the footer.</div>

CSS~Hover无法改变外部类

1 个答案: