Question

我有一个带有图标的导航栏，每个导航栏下都有一些文字（如家，联系人，ecc ..）。我希望如果我翻阅文字，图标会变大。现在，只有当鼠标移过图标时，我才能这样做。

这是我的导航栏：

friends

这是剧本：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav ">
                        <li>
                            <a href="#">
                                <img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">HOME</p>
                            </a>
                        </li>
                        <li>
                            <a href="#storia">
                                <img src="img/ico_nav/storia.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">STORIA</p>
                            </a>
                        </li>
                        <li>
                            <a href="#menù">
                                <img src="img/ico_nav/hamburger.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">MENÙ</p>
                            </a>
                        </li>
                        <li>
                            <a href="#gallery">
                                <img src="img/ico_nav/gallery.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">GALLERY</p>
                            </a>
                        </li>
                        <li>
                            <a href="#contatti">
                                <img src="img/ico_nav/contatti.jpg" class="img-circle noinmobile icons" alt="Menù" width="50" height="50" style=" margin-bottom:15px">
                                <p class="navtext">CONTATTI</p>
                            </a>
                        </li>
                    </ul>
                </div>

现在，当徘徊时，图标会变得更大，但如果图标下方的文字悬停，我希望它们变得更大。我该怎么做？我试过但不幸的是我无法弄清楚如何去做。

我希望自己解释一下！提前致谢

Answer 1

你不需要javascript。您可以使用简单的CSS过渡。类似的东西：

.navbar-nav li img {
  transition: transform 0.4s;
  transform: scale(1);
}

.navbar-nav li:hover img {
  transform: scale(1.5);
}

如果您不想转换，可以删除transition行。您还可以使用width和height代替transform，以获得某种方式（在浏览器时间内）浏览器支持。

JQuery - 悬停时让图标更大

1 个答案: