Question

我有以下用于图片和文字的HTML代码

<div class="subcontainer1">
    <img src="a.png" alt="" class="imgcolumn">
     <h3 class="header3">Hello</h3>
</div>

此内容位于图片上方。

所以我试图在单个悬停上应用两种不同的css效果。

就像当我将鼠标悬停在具有 subcontainer1 类的div上时image should shrink和text should grow.

收缩和增长的CSS

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

现在可以这样做吗？或者我只是期待悬停过多？

Answer 1

这样的东西？

.subcontainer1:hover img { transform: scale(1.1); }
.subcontainer1:hover h3 { transform: scale(0.9); }

小提琴：http://jsfiddle.net/JzgF5/

Answer 2

你应该这样写，例如当.subcontainer1悬停时将样式添加到 img 或 h3

 .subcontainer1:hover img{
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }


    .subcontainer1:hover .header3{
       /*Your style*/
    }

DEMO

Answer 3

html中不存在.grow和.shrink 所以为了使它工作你必须使用

   .subcontainer:hover{
     //css rules
    }

在Div上应用两种悬停效果

3 个答案: