Question

所以，我在代码中遇到了两个问题：

我不知道如何将我的菜单对齐在我的徽标后面。我试着用

显示：内联;

但它没有效果。

我希望我的菜单元素在悬停时会变得更厚，但我似乎无法让它工作。

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="navigation">

    <a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo"     width="20%" height="20%"></a>

    <div class="menu">
        <ul>
            <li class="menu-item"><a href="#home" class="menu-item">Home</a></li>
            <li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a></li>
            <li class="menu-item"><a href="#about" class="menu-item">About Me</a></li>
            <li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a></li>
        </ul>
    </div>

</div>



<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

$('.menu-item').hover(function(){
    $(this).addClass("active-menu");
},function(){
    $(this).removeClass("active-menu");
});

})

</script>
</body>
</html>

css：

@charset:"UTF-8";

body {
background-image: url(../images/background.png);
}

.menu ul {
list-style-type: none;
}

.menu li {
font-family: 'Open Sans', sans-serif;
display: inline;
}

.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
margin: 5px;
border-bottom: 1px solid #0A0F2D;
}

.active-menu {
border-bottom: 5px;
}

.logo {
margin-left: 20px;
}

JSFIDDLE

Answer 1

进行这些更改，请参阅下面的输出

$(document).ready(function () {

    $('.menu-item').hover(function () {
        $(this).addClass("active-menu");
    }, function () {
        $(this).removeClass("active-menu");
    });

});

@charset:"UTF-8";
 body {
    background-image: url(../images/background.png);
}
.menu ul {
    list-style-type: none;
}
.menu li {
    font-family:'Open Sans', sans-serif;
    display: inline;
}
.menu a {
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 25px;
    margin: 5px;
    border-bottom: 1px solid #0A0F2D;
}
.active-menu {
    border-bottom: 5px;
}
.logo {
    margin-left: 20px;
}
.navigation img{
    float:left;
}
.menu a:hover{
    border-bottom: 3px solid #0A0F2D;
   
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="navigation">	<a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo" width="20%" height="20%"></a>

        <div class="menu">
            <ul>
                <li class="menu-item"><a href="#home" class="menu-item">Home</a>

                </li>
                <li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a>

                </li>
                <li class="menu-item"><a href="#about" class="menu-item">About Me</a>

                </li>
                <li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a>

                </li>
            </ul>
        </div>
    </div>
</body>

如何将列表与图像对齐，以及jquery问题

1 个答案: