Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
hampa
0 / 0 / 0
Регистрация: 13.02.2015
Сообщений: 8
1

Объясните причину неработоспособности кода

13.02.2015, 21:28. Просмотров 914. Ответов 5
Метки нет (Все метки)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<meta charset="utf-8">
<style>
body {background-color: rgb(197, 207, 223);}
.center {position: absolute; float: right; margin-top: 100px; margin-left: 410px; display: block;}
.left {position: relative; float: left; margin-top: 100px; margin-right: 400px; visibility: hidden;}
.hover 
.hover:hover {visibility: visible;}
</style>
 
<!-- CENTRAL PICTURE !-->
 
<div>
<img class="hover center" src="imgc.png">
</div>
 
<!-- LEFT PICTURE !-->
 
<div>
<img class="hover left" src="imgl.gif">
</div>
Задача : В центре экрана есть изображение. При наведении на него (:hover) должно проявляться второе изображение в другой части экрана.
Как я попытался решить:
Установил второму изображению свойство visibility:hidden, создал следующие классы:
.center - позиция центрального изображения
.left - позиция второго изображения
.hover - общий класс для обоих изображений
.hover:hover - при наведении на элемент данного класса (.hover) должен (по моей логике) всем остальным элементам этого класса давать свойство, описанное в нем (в моем случае отмена visibility:hide с помощью visibility: visible).
Объясните почему не работает (решение на java и т.д. не предлагать, интересует только css).
На кривизну кода внимания не обращайте, только третий день изучаю верстку.
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.02.2015, 21:28
Ответы с готовыми решениями:

For each с массивом символов - выяснить причину неработоспособности приведенного кода
Компилятор ругается на примерно такой код: void foo(char cArray) { for each (char c in cArray)...

Указатели - разобрать код и причину его неработоспособности
Всем привет! Возможно,вопрос глупый,но я не могу разобраться,а спросить некого,так как изучаю сам....

Возник вопрос о причине неработоспособности кода
Добрый вечер. При изучении Python возник вопрос в причине не работоспособности когда:x = y // 2...

В чем причина неработоспособности данного кода расчета значения формулы
Задание При выполнении, 1 выполняет сразу два действия место одного и т.д., не хочет работать...

5
Давран
201 / 150 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
13.02.2015, 21:55 2
hampa, а почему такой негатив к js?
0
hampa
0 / 0 / 0
Регистрация: 13.02.2015
Сообщений: 8
13.02.2015, 22:04  [ТС] 3
Цитата Сообщение от Давран Посмотреть сообщение
hampa, а почему такой негатив к js?
Потому что я только начал изучение верстки, и с java абсолютно незнаком. Я не хочу просто найти готовое решение на java и вставить, т.к. эту задачу я себе поставил сам для некой практики с css. Частично проблема заключалась в том, что класс .hover был пуст, и следовательно .hover:hover не действовало. Я добавил в этот класс символ "!" (просто чтобы там что-то было) и свойство заработало, но оно работает только на том блоке, на который я навожу. Для определения этого я сделал так, чтобы при наведении на изображение оно пропадало. Оба изображения изначально видимы. При наведении на одно изображение пропадает только оно одно, но не оба, хотя данный класс прописан обоим изображениям. Объясните знатоки, почему так происходит? Ведь свойство класса распространяется на все элементы этого класса (при отсутствии конфликтов).

Если кто хочет не понял, переформулирую задачу : при наведении на одно изображение, необходимо чтобы на него, и на второе (с таким же классом) применялось свойство visibility: visible
0
StopSmell
292 / 168 / 29
Регистрация: 16.09.2012
Сообщений: 369
13.02.2015, 23:26 4
Лучший ответ Сообщение было отмечено hampa как решение

Решение

Цитата Сообщение от hampa Посмотреть сообщение
при наведении на элемент данного класса (.hover) должен (по моей логике) всем остальным элементам э
Вот и именно что по Вашей логике, но не по логике css. :hover - псевдокласс применяемый к текущему элементу на который наведен указатель мыши. По Вашей логики запись a:hover{color: red;} приводила бы к тому что подведя указатель мыши к конкретной ссылке, все ссылки на странице стали бы красного цвета, странно, не так ли?

Что касается той задачи которую Вы описали... При такой разметке какую вы выложили:
CSS
1
div:hover+div img {visibility: visible;}
1
hampa
0 / 0 / 0
Регистрация: 13.02.2015
Сообщений: 8
14.02.2015, 04:19  [ТС] 5
Цитата Сообщение от StopSmell Посмотреть сообщение
Код CSS
1
div:hover+div img {visibility: visible;}
Большое спасибо, заработало.

Добавлено через 3 часа 57 минут
Цитата Сообщение от StopSmell Посмотреть сообщение
1
div:hover+div img {visibility: visible;}
Еще вопрос: можно ли к проявляемому изображению применить transition-duration для плавности проявления?
0
Padimanskas
Superposition
944 / 609 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
14.02.2015, 05:19 6
Псевдоклассы событий устанавливаются для каждого экземпляра по отдельности. Чтобы как-то повлиять псевдоклассом на побочный элемент, нужно чтобы побочный был соседним или дочерним элементом.

HTML5
1
2
<div id="a">Div A</div>
<div id="b">Div B</div>
CSS
1
2
3
4
5
6
7
#b {
   visibility: hidden; 
}
 
#a:hover + #b {
    visibility: visible;
}
0
14.02.2015, 05:19
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.02.2015, 05:19

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Объясните причину
Привет! Объясните, плиз, на пальцах, почему. Вопрос: Какие из этих if верны, т.е. выполнятся? ...

Объясните причину ошибки
Я пытаюсь сделать функции в графическом редакторе: вырезать, копировать, вставить. При выделении...

объясните пожалуйста причину ошибки
вот такой небольшой код &lt;? $hello = &quot;hello&quot;; $string = &quot;Hello world&quot;; echo &quot;$string&quot;; ?&gt; ...

Вывод предупреждения, объясните причину
Пишу код, компилирую, а он выдает предупреждение. Пример кода: #include &lt;stdio.h&gt; float f(float...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.