css - 将鼠标悬停在div上时缩放字体图标的大小，仅使用css？

Question

我正在尝试制作一个 div，当将鼠标悬停在整个 div 上时，字体图标的大小会缩放，而不仅仅是特定图标。类似于： http: //fortawesome.github.io/Font-Awesome/icons/澄清一下，将鼠标悬停在一个<li>项目上会导致特定图标缩放，而不是其余的。我知道如何使它在鼠标悬停在图标本身时改变大小，但是当悬停在 div 的其余部分时我需要它来缩放。

我想知道这是否可以简单地通过 CSS，没有 jQuery/javascript，也许通过一些我不太了解的选择器来完成？提前致谢。

Answer 1

我能想到的最快的例子......

<h1><span>★&lt;/span>your text?</h1>

像这样的东西...

h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.8em;
    border: 1px solid red;
    padding: 1em; 
}

h1 span {
    display: inline-block;
    vertical-align: middle;
-webkit-transition: all 0.3s ease-out; 
   -moz-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
        transition: all 0.3s ease-out;    
}

从右到左想想：

h1:hover h1 span {
    font-size: 3em;      
}

“ h1 内的任何跨度，而 h1: 悬停在 -> 执行此操作...”

第2轮：这应该说明。

HTML

<ul class="icon-list">
    <li>
        <a href="#">
            <div class="your-icon">&#9731;</div>
            Some text that doesn't move.
        </a>
    </li>
</ul>

CSS

.icon-list {
    list-style: none;
    padding: 0;
}

.icon-list li a {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    text-decoration: none;
    padding: 0 .5em;
    color: #111;
    -webkit-border-radius: 1em;
            border-radius: 1em;
}

.icon-list li a:hover {
    background-color: rgba(255,0,0,.1);
}

.icon-list li a .your-icon {
    display: inline-block;
    float: left;
    width: 32px;
    height: 32px;
    text-align: center;
}

.icon-list li a:hover .your-icon {
    font-size: 28px;
}

Answer 2

如果您希望它在悬停在 div 上时进行缩放，您只需在 div 本身上使用悬停选择器。.font-hover像在你的css中那样向div添加一个类：

.font-hover:hover {
     font-size: 12px;
}

显然将字体大小设置为您想要的任何内容。

Answer 3

看到这个小提琴

CSS

div {
    padding: 3px 5px;
}
    div,span {
    transition: font-size .7s;
}

span {
    display: inline-block;
    width: 45px;
    vertical-align: middle;
}

div:hover span{
    font-size: 23px;
}

HTML

<div><span>OK,</span> Let's get bigger.</div>