JQuery

Question

我有一个带图标的导航栏，每个图标下都有一些文本（例如主页、联系人、ecc..）。我希望如果我浏览文本，图标会变大。现在只有鼠标经过图标才能做到。

这是我的导航栏：

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

这是脚本：

function makeBigger() {
        $(this).css({height: '+=10%', width: '+=10%'});
    }
    function returnToOriginalSize() {
        $(this).css({height: "", width: ""});
    } 
    $(function(){
        $('.icons').hover(makeBigger, returnToOriginalSize);
    }

就像现在一样，鼠标悬停时图标会变大，但我希望图标下的文字悬停时它们也会变大。我该怎么做？我试过了，但不幸的是我不知道该怎么做。

希望我解释清楚了！提前致谢

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 - 悬停时使图标变大

JQuery - Make icons bigger when hovered

html

javascript

hover

jquery-hover