Ненужный класс Bootstrap Hover добавляется без причины?
Я пытаюсь создать чрезвычайно простую панель навигации. Я добавил бутстрап в свой проект, а также свою собственную таблицу стилей. Я включил только 1 класс начальной загрузки на свою страницу (я думаю). Я добавил пользовательский эффект наведения, но по какой-то причине я получаю анимацию наведения плюс еще одну анимацию, играющую с изменением цвета и другими вещами.
Вот как обстоят дела с ховером сейчас:
Я хочу, чтобы текст оставался белым при наведении и не имел черного подчеркивания.
Вот мой код:
HTML/EJS
<head>
<meta charset = "utf-8">
<title>Madhose</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css/styles.css">
<nav>
<a href = "#" class = "logo">Madhose</a>
<ul>
<li><a href = "/">Home</a></li>
<li><a href = "#">Poems</a></li>
<li><a href = "#recipes">Recipes</a></li>
<li><a href = "/posts">Posts</a></li>
</ul>
</nav>
<body>
<div class = "container-fluid">
<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
<h1><%= post.title.substring(0,200) %></h1>
<p><%= post.content.substring(0,200) %>...
<a href = "/posts/ <%= post.title %>">Read More</a></p>
<%}); %>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.footer-padding {
padding-bottom: 60px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
nav {
width: 100%;
position: fixed;
z-index: 2;
display: flex;
align-items: center;
padding: 0;
margin-top: -7px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
width: 100%;
background-color: rgb(0, 120, 255);
height: auto;
display: flex;
justify-content: flex-end;
}
li a {
color: rgb(235, 222, 222);
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 19px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: flex-end;
display: block;
}
li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: rgb(235, 222, 222);
transition: width .3s;
}
li a:hover::after {
width: 100%;
transition: width .3s;
}
.logo {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald';
display: flex;
z-index: 3;
}
.logo:hover{
color:white;
text-decoration: none;
}
h1{
font-family: 'Oswald';
}
Я почти на 100% уверен, что эта проблема возникает из-за начальной загрузки, но если это что-то еще, скажите мне!
@imvain2 imvain2 Я думал, что мой стиль панели навигации перезаписывает бутстрап?
Ответы 1
Ваш стиль будет переопределять бутстрапы только в том случае, если вы правильно написали свой каскад. Если вы используете такой инструмент, как devtools в Chrome, и проверяете CSS элемента, вы можете увидеть, что существует несколько уровней CSS, нацеленных на элемент, но не все активно применяются, так как некоторые из них перезаписываются. Ваши стили могут не иметь приоритета, если их каскадное значение не превышает значение Bootstrap.
Таким образом, если вы хотите переопределить значения более последовательно, используйте псевдо-имяпространство:
nav#topNavigation ul li a {}
nav#topNavigation ul li a:hover {}
Добавляя уникальный идентификатор к элементу, мы увеличиваем каскадное значение для этого селектора, и применяется наш css, а не Bootstrap.
Работал! Спасибо!!
Без проблем! Я рад, что это помогло :)
nav, скорее всего, используется в Bootstrap для навигации по меню, и если вы не используете пользовательскую сборку, Bootstrap применяет тему по умолчанию. Ваши варианты: перезаписать их стили своим собственным CSS, получить урезанную версию Bootstrap без темы (вы используете более старую версию, в которой, я полагаю, все еще есть эта опция) или отказаться от Bootstrap и использовать barebones Framework, который фокусируется на основных элементах, но не применяет стиль.