javascript - CSS NavBar 过渡问题-6ren

javascript - CSS NavBar 过渡问题

转载作者：太空宇宙更新时间：2023-11-04 14:58:49

24

4

我的导航栏悬停效果特别是过渡有问题(第 109/110 行)。本质上，我希望鼠标悬停在哪个链接上以提高(边距增加 2%)，而其他链接保持边距为 0。问题是，每当我将鼠标悬停在其中任何一个上时，所有链接边距都会增加 2%。如果我违反了任何发帖规则和/或如果这个问题根本不清楚，这是我第一次发帖，对于困惑的代码深表歉意。我玩了一会儿，想不通。此外，如果它更简单，我可以弄清楚如何使用 javascript 来完成它。
干杯

<!DOCTYPE html>
<html>

<head>
    <title>
            Atticus Products
    </title>

<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>


/*

$(document).ready(function(){
  $("a").hover(function(){
    $("a").animate({up:'250px'});
  });
});
*/
</script>



<style>
    html, body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        font-size:100%;
        background-color:#6ec247;
        font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;    
        }


    #wrapper {
        margin: 0 auto; 
        width: 50%; 
        height: 100%; 
        position: relative;
    }

  /*Header: Contains Logo and NavBar*/
    #header {
        border-bottom: 8px solid #f2f2f2;
        overflow:hidden;
        height: auto;
        position:relative;
        clear:both;
        height:auto;
        margin:0;
        display:block;          
    }

    #logoName {

        max-width: 100%;
        width:40%;
        float:left;
        height:150px;
    }

    #logoName a {
        position:absolute;
        bottom:0;
        color:#FFFFFF;
        text-decoration: none;
        font-size:3em;
        font-weight: bold;
    }


    /*NavBar*/
    #nav {
        margin: 0; 
        padding: 0; 
        list-style: none; 
        text-align: right; 
        right:0;
        width:60%;
        float:right;
        position:absolute;
        bottom:0;
    }

    #nav li {
        display: inline;


    }

    #nav li a {
        display: inline-block; 
        padding: 8px 15px; 
        text-decoration: none; 
        font-weight: bold;
        color: #FFFFFF;
        font-size:1em;
        margin-bottom:0;
    }


    #nav li a:hover {
        color: #c00; 
        background-color: #000000;
        opacity:0.5;
        transition-property: margin-bottom;
        transition-duration:4s;
        margin-bottom:2% 
/*this is where the problem is*/    
    }


/*Content: Contains Container1, LogoWords and Logo1*/

    #content {
        height: 60%; 
        text-align: center; 
        /*background-color: #4d8e2f;*/
        color:#FFFFFF;
        margin:0;
        top:0;
        display:relative;
        font-weight: bold;
    }

    #container1 {
        display: block; 
        max-width: 100%;
        position:relative;
        height:40.5%;
        width:100%;
        margin:0;
        background-color:#6ec247 ;
        z-index:0;
        border-bottom: 8px solid #f2f2f2;
    }

    #logoWords{
        z-index:1;
        display:block;
        position:absolute;
        width:auto;
        height:auto;
        top:18.5%;
        right:0;
        color:#FFFFFF;
        text-decoration: none;
        font-size:2.5em;
        font-weight: bold;
        text-align:left;
    }



    #logo1 {
        display:block;
        z-index:1;
        position:absolute;
        left:0;
        top:18.5%;
        width:auto;
        height:auto;
    }



    #content{
        background-color:#6ec247 ;
    }


    #content p {
        margin:0;
    }


    #footer {
        height:10%; 
        width: 100%; 
        position: absolute; 
        bottom: 0; 
        background-color: #f2f2f2; 
        border-bottom: 1px solid #ccc; 
        border-top: 1px solid #ccc;
    }




</style>
</head>
<body>

<div id="wrapper">
<div id="header">


    <ul id="nav">
        <li><a href="index.html">About</a></li>
        <li><a href="ourapproach.html">Our Approach</a></li>
        <li><a href="careers.html">Careers</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>



    <div id="logoName">
    <a href="index.html">Atticus <br>Products</br></a>
    </div>




</div>

<div id="content">

    <div id="container1">
    </div>

    <img id="logo1" src="image/justlogo.png" alt="logo" width="207" 
       height="214">

    <div id="logoWords">
    <p><br>We find the people</br> that make your company succeed</p>
    </div>



    <div id="content">
    <p>
        <br>Careers with Atticus</br>

    </p>
    </div>
</div>


<div id="footer">
    <p>bam</p>
</div>

</div>
</body>
</html>

最佳答案

您的问题出在您的 jQuery 中。因为你有 $('a').animate 它会影响页面上的每个 a 元素。您可以通过将 'a' 更改为不带引号的 'this' 来解决这个问题。

$(document).ready(function(){
  $("a").hover(function(){
    $(this).animate({up:'250px'});
  });
});

这只会影响悬停的元素。祝你好运。

关于javascript - CSS NavBar 过渡问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16681999/

24

4

0

文章推荐： java - 如何在渲染 View 之前对其进行屏幕截图或快照？

文章推荐： javascript - AngularJS 加载 JSON 数据然后从中解析/加载 HTML

文章推荐： html - IE11 - 如何在禁用的字段集中启用滚动条

javascript - $ (".navbar.navbar-inverse").click() 有效，但 $ (".navbar .navbar-inverse").click() 无效？
我仍在学习网页设计的诀窍，并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色，我发现以下内容是正确的，但不确定原因: 作品: $(".navbar.navbar-
html - Twitter bootstrap 3 navbar navbar-right outside navbar-collapse
在 Twitter bootstrap 2.3.2 中，我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
javascript - 当 NavBar 在小屏幕上垂直时如何加载处于折叠状态的 NavBar
我是 bootstrap、jquery 和 javascript 的新手，我在一个网站上工作，但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在，该栏在 XS 屏幕上是垂直
css - 为什么导航类名称是 navbar-default 而不是 navbar
我正在学习使用 Ruby on Rails 编写代码，并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。我正在尝试将导航栏的边框更改为无，而不是: .navbar { bord
angular - 中的 "*navbar "是什么意思？
每当我学习 ionic 的教程时，我都会看到短语 *navbar。这是什么意思？我知道 * 表示它在模板中插入标签，但无法真正理解这个表达式.. 最佳答
javascript - Bootstrap 2 navbars 1 navbar 动态关闭
我不知道如何正确表达这一点，但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现，我想让底部栏填充顶栏的位置。目前的
css - 在 navbar-header/navbar-brand 中居中图像
这是我第一次使用 bootstrap，我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
javascript - 如何在滚动时将 navbar-default 更改为 navbar-inverse？
在我网站的顶部，主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点，当你滚动时，类会更改为这样我就可以创建一个更优雅、更简单的滚
html - Bootstrap : navbar-colapse div enters navbar
这是我的问题: collapse problem 如您所见，我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗？ Title
html - Bootstrap NavBar 如何更改 Navbar-Brand 类上的文本颜色？
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色，特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
jquery - nav navbar-nav navbar-right 下拉内容不会在移动设备上向下推送菜单项
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
css - 我的 Navbar.css 没有改变我的 Navbar.jsx
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确？ import React, { Component } from 'react'; import
css - navbar-header 和 navbar-nav 没有对齐
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中，而 navbar-nav 看起来像是 align="top
html - navbar-nav 被推到 navbar-brand 下面？
当我的屏幕宽度达到 767px 时，导航会异常折叠。当我转到 768px 时，navbar-nav 会低于 navbar-brand。直到我达到 795px，navbar-brand 和 navbar
css - Bootstrap navbar navbar-fixed-top 在一定尺寸后崩溃
我正在尝试实现一个固定的导航栏，但是在一定的屏幕尺寸(〜宽度:989)之后，导航栏向下移动。它也不适用于移动设备。图片: 导航栏完全贴在页脚上，而不是停留在页面顶部。您可以在以下位置查看代码:ht
css - 对齐 NavBar Right 导致 NavBar 禁用
我正在尝试右对齐我的 NavBar，但每当我添加 float:right 时，导航栏都会向右移动，但似乎已禁用。参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
html - Navbar-toggler 搞乱了 navbar-brand 排列
我正在使用 Bootstrap 4，我希望我的 navbar-toggler 出现在 navbar-brand 之前，例如 this ，但是如果我将 navbar-toggler 放在第一位，我的对齐
html - Bootstrap navbar - 如何使 navbar-header 全宽
如何使 navbar-header 全宽或单独成一行？我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
html - CSS 中 .navbar 和 .navbar a 的区别
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
css - 单独的 navbar 和 navbar-inner 类的目的是什么？
在 Twitter bootstrap 的 starter-template.html 中，navbar 写成 ... 但是，如果我将标记更改为

首页

博学

6Ren·AI

商城

javascript - CSS NavBar 过渡问题