第2轮：这应该拼写出来。

Question

我试图创建一个div，当鼠标悬停在整个div上时，字体图标的大小会缩放，而不仅仅是特定的图标。类似于：http://fortawesome.github.io/Font-Awesome/icons/的内容为了澄清，将鼠标悬停在<li>项上会导致特定图标缩放，但不会显示其余图标。我知道如何在鼠标悬停图标本身时使其改变大小，但我需要在将鼠标悬停在div的其余部分时进行缩放。

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

Answer 1

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

<h1><span>★</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：悬停在 - ＆gt;执行此操作...”

第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本身上使用悬停选择器即可。像c .font-hover一样在div中添加一个类，然后在你的css中添加：

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

显然可以根据需要设置font-size。

Answer 3

请参阅this fiddle

<强> 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>

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

3 个答案:

第2轮：这应该拼写出来。