#html #css
#HTML #css
Вопрос:
У меня есть нижний колонтитул с моим списком навигации. При наведении курсора я хотел бы изменить цвет фона всей высоты div. Как и сейчас, только фон вокруг текста меняет цвет. Я попытался добавить к тексту верхний и нижний отступы, но это не дает нужного эффекта, который я ищу. Есть ли способ сделать <a>
100% высоты содержащего нижний колонтитул div?
Код ниже:
footer {
width: 100%;
background: #222;
color: #fff;
margin: 0;
position:fixed;
left:0px;
bottom:0px;
}
.footer-navigation {
width: 60%;
display: flex;
align-items: center;
}
.footer-links-holder {
width: 25%;
position: relative;
float: left;
margin: 0;
}
.footer-links-holder:hover {
background-color: #444;
transition: 0.5s;
}
<div class="footer-navigation">
<a class="footer-links-holder" href=""><h3>About Me</h3></a>
<a class="footer-links-holder" href=""><h3>Photography</h3></a>
<a class="footer-links-holder" href=""><h3>Portfolio</h3></a>
<a class="footer-links-holder" href=""><h3>Back to Top</h3></a>
</div>
Кто-нибудь может помочь? Я искал и, похоже, не могу найти простого решения.
РЕДАКТИРОВАТЬ: вот ссылка на jfiddle https://jsfiddle.net/adamdrover/qe2d318L /
Комментарии:
1. Вы хотите, чтобы вся ширина div меняла цвет? Похоже, вам просто нужна ширина самого якоря, и это, похоже, работает здесь: jsfiddle.net/zd179hek
2. Не комбинируйте flexbox и floating, в этом мало смысла.
3. Спасибо. Это удалено, но это не решает мою проблему…
Ответ №1:
Вам нужно сделать ваши ссылки в нижнем колонтитуле «отображать: блок», и тогда он будет принимать значения ширины и высоты.
.footer-links {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
Комментарии:
1. Извините, я только что понял, что удалил этот класс из своего html и забыл удалить стиль. Кроме того, я попытался добавить display: block; в мой класс footer-links-holder , и это тоже не сработало.
Ответ №2:
https://jsfiddle.net/qe2d318L/1/
Я удалил flex
правила из .footer-contact
и .footer-navigation
, вместо этого установил их в a
, ссылка стала полной высотой:
.footer-contact a,
.footer-navigation a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
body {
background: #348F50; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #348F50 , #56B4D3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #348F50 , #56B4D3); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7 */
margin: 0;
}
.clearfix:before, .clearfix:after {
clear: both;
}
footer {
width: 100%;
background: #222;
color: #fff;
margin: 0;
position:fixed;
left:0px;
bottom:0px;
}
.centered {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.footer-logo {
width: 20%;
}
.logo {
padding: 30px 20px 10px 20px;
max-width: 100%;
}
.footer-contact {
width: 15%;
/*align-items: center;
justify-content: center;
display: flex;*/
}
h3 {
margin: 0;
text-align: center;
}
.footer-contact a,
.footer-navigation a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.footer-navigation {
width: 60%;
/*display: flex;
align-items: center;*/
}
.footer-links-holder {
display: block;
width: 25%;
position: relative;
float: left;
margin: 0;
}
.footer-links-holder:hover {
background-color: #444;
transition: 0.5s;
}
.bottom-bar {
position: relative;
text-align: center;
font-size: .8em;
text-transform: uppercase;
background: #000;
padding: 15px 0;
}
<footer>
<!-- include slogan, contact me form on web, contact button on mobile. Social media links on right. -->
<div class="centered clearfix">
<div class="footer-logo">
<img class="logo" src="images/laptop-logo.png">
<div class="social">
<a href="https://www.facebook.com/" class="facebook">
</a>
<a href="https://twitter.com/" class="twitter">
</a>
<a href="https://www.linkedin.com/" class="linkedin">
</a>
</div>
</div>
<div class="footer-contact">
<a href=""><h3>Contact Me</h3></a>
</div>
<div class="footer-navigation">
<a class="footer-links-holder" href=""><h3>About Me</h3></a>
<a class="footer-links-holder" href=""><h3>Photography</h3></a>
<a class="footer-links-holder" href=""><h3>Portfolio</h3></a>
<a class="footer-links-holder" href=""><h3>Back to Top</h3></a>
</div>
</div>
<div class="bottom-bar">
All Rights Reserved © 2016 | <a href="">Privacy Policy</a>
</div>
</footer>