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-grid-2x
----> home-grid-2
----> overlay
----> tile
------->  tile-text

基本上，当用户将鼠标悬停在tile-text上时，我希望您的文字大小增加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%;
}

<强> DEMO HERE

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>

Answer 4

您需要使用：hover

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>

css：

.title-text:hover {
    font-size: 150%;
}

DEMO

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

4 个答案: