在悬停时更改div内的字体大小

Question

我有一个包含多个元素的div。每当用户在div上徘徊时，我都希望在该div中增加字体大小。HTML代码如下：

        <div class="col-sm-5 home-grid-2x">
            <div class="home-grid-2" style="right: 0%; top: 0%;">
                <div class="overlay" style="top: 99.9898%; left: -99.9224%;"></div>
                <a class="tile" href="/#/apply">
                <span class="tile-text">
                    Memmbership Application
                </span>
                </a>
            </div>
        </div>

正如您所看到的，层次结构如下：

-> home 2x

基本上，当用户在tile-text上徘徊时，我希望yo增加home-grid-2x的文本大小。我尝试了以下几点：

.home-grids:hover .tile {
    text-size:150%;
}

.home-grids:hover .tile.tile-text {
    text-size:150%;
}

.home-grids:hover tile-text {
    text-size:150%;
}

然而，这一切都不起作用。这有可能吗？

Answer 1

您可以这样做(使用现有的选择器)：

CSS

.home-grid-2x:hover .tile-text {
   font-size:150%;
}

这里的演示

Answer 2

您使用了错误的CSS属性。

使用text-size代替font-size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

就像这样：

.home-grid-2x:hover .tile {
    font-size:150%;
}

.home-grids-2x:hover .tile.tile-text {
    font-size:150%;
}

.home-grids-2x:hover tile-text {
    font-size:150%;
}

Answer 3

错误的CSS和错误的选择器兄弟！

​

.home-grid-2x:hover .tile-text {
  font-size: 150%;
}

<div class="col-sm-5 home-grid-2x">
  <div class="home-grid-2" style="right: 0%; top: 0%;">
    <div class="overlay" style="top: 99.9898%; left: -99.9224%;"></div>
    <a class="tile" href="/#/apply">
      <span class="tile-text">
                    Memmbership Application
                </span>
    </a>
  </div>
</div>

​