Эй, я создал навигатор, и я добавил эффект иллюзорного маркера.Проблемы с перекрывающимися элементами и видимостью
В принципе, я хочу, чтобы это было, когда я наводил курсор на изображение, чтобы стрелка отображалась под ним.
К сожалению, я не могу заставить его работать.
На рисунке ниже я хочу продемонстрировать. Так размещаются стрелки. В принципе, я установил второй на visibility: hidden;, и в целях иллюстрации оставил все видимым.
Тот, у которого есть черный фон, показывает тот, на котором я курсирую курсором (демонстрация работы выбора, должно быть что-то не так с моей реализацией css). Я установил фон как # 000 (черный) только для иллюстрации целей наведения. Что касается фактического кода, я просто хочу, чтобы изображение было видимым.
Итак, еще раз, что я хочу для стрелки, чтобы остаться скрытыми, если вы не парить над ними. Мой код выглядит как этот
<div class = "arrows">
<img src="" class="1" alt =""><img src="" class="2" alt =""
<img..et cetera>
</div>
Что касается фактического CSS, у меня есть некоторый запас и отступы настройки, которые не очень важно.
В основном важная часть:
.arrows img {
position: relative;
bottom: 20px;
}
и теперь для конкретных стрел
img.1 {
visiblity:hidden;
margin, padding and few other properties
}
img.1:hover {
visibility: visible;
}
Однако, когда я наведите курсор мыши на изображение, он просто остается невидимым. Есть идеи, как это решить?
EDIT: Добавлен фрагмент кода/jsfiddle
* {
box-sizing: border-box;
/* Opera/IE 8+ */
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: Arial;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
/*
====================================================
NAVIGACNY PANEL
====================================================
*/
.navbar {
background-color: #3c1f0a;
width: 100%;
height: 40px;
}
.navbar ul {
z-index: -1;
text-align: center;
display: inline-block;
list-style: none;
margin-left: 175px;
padding: 0px;
}
.navbar li {
width: 80px;
display: inline-block;
font-family: Helvetica;
font-size: 13px;
padding: 0 5px;
}
.navbar a {
text-decoration: none;
color: #FFF;
}
.navbar li:hover {
background-color: #602401;
}
/*
=============================================================
KRATKY POPIS - Index
=============================================================
*/
.ITW {
width: 100%;
height: auto;
padding-bottom: 20px;
background: rgb(252, 255, 251);
background: linear-gradient(to bottom, rgba(252, 255, 251, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 250, 1) 1%, rgba(255, 253, 255, 1) 1%, rgba(252, 252, 252, 1) 20%, rgba(250, 250, 250, 1) 21%, rgba(248, 248, 248, 1) 31%, rgba(246, 246, 246, 1) 32%, rgba(247, 247, 247, 1) 35%, rgba(233, 233, 233, 1) 73%, rgba(234, 234, 234, 1) 75%, rgba(232, 232, 232, 1) 76%, rgba(227, 227, 227, 1) 100%);
}
.ITW img {
visibility: hidden;
position: relative;
padding: 30px 15px 10px 17px;
bottom: 20px;
}
.ITW img:hover {
position: relative;
visibility: visible;
}
img.move-image {
margin-left: 190px;
}
img.ma {
padding-left: 30px;
margin-left: 30px;
}
img .ma:hover {
visibility: visible;
}
img.mb {
padding-left: 20px;
padding-right: 30px;
margin-left: 20px;
}
img.mc {
padding-right: 30px;
margin-left: 15px;
}
img.md {
padding-right: 20px;
margin-left: 25px;
}
img.me {
margin-left: 30px;
}
img.mf {
margin-left: 30px;
padding-right: 15px;
}
.ITW h2 {
font-family: Helvetica;
font-size: 19px;
padding: 10px 0px 15px 0px;
color: #b15e23;
margin-left: 200px;
}
.ITW p {
font-family: Helvetica;
font-size: 12px;
color: #656565;
margin-left: 200px;
}<body>
<div class="navbar">
<ul>
<li><a href="#ITW">Index</a>
</li>
<li><a href="#ITW">O predmete</a>
</li>
<li><a href="#Lectures">Prednášky</a>
</li>
<li><a href="#Results">Výsledky</a>
</li>
<li><a href="#Exercises">Cvičenia</a>
</li>
<li><a href="#Contact">Kontakt</a>
</li>
<li><a href="#Related">Related</a>
</li>
</ul>
</div>
<div class="ITW">
<img src="icons/menu_bullet.gif" class="move-image" alt="moved-bullet">
<img src="icons/menu_bullet.gif" class="ma" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mb" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mc" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="md" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="me" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mf" alt="index-bullet">
</div>
скрипка будет легко решить эту проблему – Gintoki
@Rawrplus вы исправили .navbar li {width: 80px; } он должен быть авто, чтобы избежать того же –
Кроме того, я переключил видимость: скрытый; и видимость: видимая по непрозрачности: 0; и непрозрачность: 1; и он сделал трюк, хотя это своего рода глупая проблема вокруг проблемы, а не борьба с ней. – Rawrplus