Как использовать display: none в данном случае?

Question

[Max Payne]

В CSS я не знаток, но пытаюсь сверстать простое меню выдвигающееся при наведении курсора.

-- Меню

-- Меню при наведении

Код этой части следующий:

<div class="left_menu_content">
			<div class="left_menu_book">
				<div class="left_menu_content_book_icon">
					<a href="#">
						<img src="Book_icon_64.png">
					</a>
				</div>
				<div class="left_menu_content_book_title">
				TESTTExt
				</div>
			</div>
		</div>

.left_menu_content {
				position: relative;
				top: 75px;
				height: calc(100% - 55px);
				width: 100%;
			}
			.left_menu_book {

			}
			.left_menu_content_book_icon {
				text-align: -webkit-left;
			}
			.left_menu_content_book_title {
				text-align: -webkit-right;
				margin-top: -64px;
			}

Я хочу по умолчанию текст не отображался, а появлялся лишь при наведении курсора. Знаю, что нужно использовать display: none / display: block , но не понимаю как конкретно для данного примера.

Answer 1

[Владлен Грачев]

Если б вы дали пример на каком-нибудь jsfiddle, было бы гораздо проще всем. Ну раз нет, будем на словах. Для этого вашего .left_menu_content_book_title нужен display: none. А на :hover ему же display: block. Опять же, в силу отсутствия примера и какого либо кода, селектор для отображения назвать не получится. Что-нибудь вроде следующего:

.left_menu_content_book_title {
    display: none;
}
.left_menu_content:hover .left_menu_content_book_title {
    display: block;
}

Под свой препроцессор подгоните сами.

Comments

[Max Payne]

Ваше решение мне помогло, спасибо ;)