Я хотел бы задать два вопроса. У меня есть коробка в моем bootstrap, и когда я нахожу ее, цвет становится фиолетовым, а слово «Присоединиться» внутри моей коробки становится белым. Проблема в том, что текст Join является белым только тогда, когда я нахожу указатель на текст c и я хочу, чтобы он оставался белым, пока я нахожусь внутри целого поля, а не только когда я нахожусь над словом «Join». Если я перемещаю мышь немного вправо или влево от слова «Присоединиться», и пока я нахожусь внутри поля, слово «Соединение» больше не белое, а снова серое, как раньше, до того, как я наведусь поверх него.
Обновление: Спасибо @sanriot за ответ на мой первый вопрос! Это сработало!
И мой второй вопрос: когда я изменяю размер страницы и появляется меню гамбургера, альянс моего меню не находится в одной вертикальной строке. Поле «Присоединиться» находится немного левее, как вы можете видеть на картинке № 1. Как я могу выровнять «Объединение» с остальной частью моего меню?
Это мой HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Aurora</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a
class="navbar-brand"
href="Aurora.html"
target="_blank"
style="color: rgb(98, 99, 104)"
>
<b>Aurora</b></a
>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" style="color: purple;"
><b>
<font
onmouseover="this.style.color='rgb(196, 6, 152)';"
onmouseout="this.style.color='rgb(128, 0, 128)';"
>Aurora Pro</font
></b
></a
>
</li>
<li>
<a href="#" style="color: #95979D"
><b
><font
onmouseover="this.style.color='#660066';"
onmouseout="this.style.color='#95979D';"
>Become An Influencer
</font></b
></a
>
</li>
<li>
<a href="#" style="color: #95979D"
><b
><font
onmouseover="this.style.color='#660066';"
onmouseout="this.style.color='#95979D';"
>Sign In</font
></b
></a
>
</li>
<li class="centeredjoin">
<a class="joinclass" href="#" style="color: #95979D">
<b> Join </b></a
>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
и это мое CSS:
body {
background-color: black;
}
li.centeredjoin {
border: 1px solid ;
color: rgb(123, 124, 129);
border-radius: 3px;
width: 70px;
height: 28px;
margin-top: 10px;
text-align: center;
}
.joinclass {
padding: 0em !important;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Изображение № 1 .