CSS Dropdown на картинке Hover

-1

Я хочу, чтобы логотип был раскрывающимся при зависании на нем, но это не сработало, можете ли вы помочь?CSS Dropdown на картинке Hover

dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
dropdown:hover dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="ro"> 
 

 

 
<head> 
 
    <title>Evolutia sistemelor de operare Windows</title> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <div class="dropdown"> 
 
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50"> 
 
    <div class="dropdown-content"> 
 
     <img src="winlogo.png" alt="Windows Logo" width="300" height="200"> 
 
     <div class="desc">Microsoft's OS Logo since Windows 8</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Я новичок в CSS, и мой первый проект должен включать в себя этот парить на изображение, я упоминаю, что мне нужно использовать мой CSS от mystyle.css, не используя <style> внутри индекса страницы ,

источник

2016-10-11 V.Dum

Вы пропустили точку для правил класса в своем CSS, должно быть '.classname' – LGSon

Все еще не работает, оно показывает как небольшое изображение, так и результат зависания. –

Отправленный образец, используйте это и отрегулируйте его с каким элементом, который должен показать, а какой нет. – LGSon

Вы пропустили точку для правил класса в вашем CSS, должны быть .classname

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="ro"> 
 

 

 
<head> 
 
    <title>Evolutia sistemelor de operare Windows</title> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <div class="dropdown"> 
 
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50"> 
 
    <div class="dropdown-content"> 
 
     <img src="winlogo.png" alt="Windows Logo" width="300" height="200"> 
 
     <div class="desc">Microsoft's OS Logo since Windows 8</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-10-11 16:23:43 LGSon

Вы забыли поставить точку перед именами классов в файле CSS.

Ваш код:

dropdown:hover dropdown-content { 
    display: block; 
}

, и вы должны это следующим образом:

.dropdown:hover .dropdown-content { 
    display: block; 
}

Я думаю, что лучший способ для работы с меню и раскрывающийся использовать элементы ul li Intead , Я советую вам использовать библиотеки передних конечностей, такие как Bootstrap или даже Materialize-css, так проста в использовании, и это соответствует хорошей практике.

источник

2016-10-11 16:24:35

Добро пожаловать в переполнение стека! ** Это действительно комментарий, а не ответ. ** Я признателен, что у вас еще нет достаточной репутации, чтобы оставлять комментарии, но, пожалуйста, не используйте систему ответов в качестве замены. Получение репутации довольно легко и требует лишь немного усилий с вашей стороны. Благодаря! –

Ваше мнение о том, какие рамки использовать, не имеет никакого отношения к вопросу, заданному здесь. –

Спасибо! Но это школьный проект, и мне нужно сделать это таким образом, но спасибо за отличные советы! –

CSS Dropdown на картинке Hover

ответ

Смежные вопросы