CSS парения картинка преобразования И не отключить

у меня есть этот код:CSS парения картинка преобразования И не отключить

<style> 

.menypic:hover { transform:scale(1.1,1.1)} 


.menu ul {list-style: none;padding: 0px;margin: 0px;} 
ul.menu li {display: block;position: relative;float:left;border:0px solid #000;list-style-type: none;} 
.menu li ul {display: none;border:0px;} 
.menu ul li a {display: block;background: #fff;padding: 5px 5px 5px 5px;text-decoration: none; 
     white-space: nowrap;color: #000;border:0px; font-family: "Calibri", Times, serif;font-size: 14px;} 
.menu ul li a:hover {background: #fff;} 
.menu li:hover ul {display: block; position: absolute;border-bottom: solid thin #0066ff;border-left: solid thin #0066ff;border-right: solid thin #0066ff;background: #0066ff} 
.menu li:hover li {float: none;} 
.menu li:hover a {background: #ffffff;border:0px solid #000;} 
.menu li:hover li a:hover {background: #0066ff;border:0px solid #000;color: #fff;text-decoration: none;} 

#drop-nav li ul li {border-top: 0px;} 

</style> 
<ul> 
<li class="menu"> 
    <a href="1-4.aspx"><img src="1-4.png" class="menypic"></a> 
    <ul class="menu"> 
     <li class="menu"><a href="1-4.aspx">&nbsp;Nyheter&nbsp;</a></li> 
     <li class="menu"><a href="2014">&nbsp;20 1-4&nbsp;</a></li> 
    </ul> 
</li> 
</ul>

И это работает brillantly. Когда я нахожу изображение, оно становится немного большим, а новое меню спускается. Прекрасно работает. Но когда я нахожу меню, изображение возвращается к его старому размеру. Можно ли провести преобразование, пока я нахожусь в меню?

источник

2015-11-26 Ola Hansen

Вы можете установить стиль для других дочерних элементов элемента меню (например,), в то время как вы являетесь элементом меню «on» с помощью указателя мыши.

Для например можно добавить:

.menu:hover .menypic { transform:scale(1.1,1.1);}

..и все элементы с .menypic класса в .menu будет масштабироваться в то время как элемент с .menu класса находится в: парить состояние.

Вот рабочая скрипку: https://jsfiddle.net/eukjxuqc/3/

EDIT/UPDATE: После прочтения комментариев, я надеюсь, что это то, что вам нужно. В принципе, я думаю, что это то, что вам нужно (это не из кода, я создал новый пример только, чтобы сделать вещи проще понять):

ul.submenu li:hover ul.menu li, ul.menu li:hover {transform:scale(1.1,1.1);}

Кроме того, новая ссылка скрипку:https://jsfiddle.net/Munja/eukjxuqc/5/

источник

2015-11-26 12:50:39

Да, но проблема в том, что у меня много картин, классифицированных как «мнимые». Поэтому, когда я использую ваш код, все мои меню-картинки преобразуются. Но, как сейчас, когда я нахожу изображение, тогда это единственное изображение, которое преобразуется. Поэтому я не хочу, чтобы он возвращался к своему первоначальному размеру, прежде чем покинуть меню. –

Итак, скажем, у вас 10 фотографий, и вы наведете номер изображения 7. Затем изображение № 7 будет преобразовано, и вы хотите сохранить это преобразование, где бы вы ни находились в текущем меню? Что будет с другими картинками, когда вы наведете еще один? Например, вы уже: наведите изображение 7, и теперь вы наведите изображение 3 (которое также является частью меню) .. будут ли оба изображения преобразованы или только изображение 3? @OlaHansen –

Ну, если я нахожу изображение номер 7, то число 7 должно трансформироваться, и меню будет падать под изображение 7. Если я нахожу изображение 3 после, то номер 7 должен вернуться к своему первоначальному размеру, а изображение 3 должно трансформироваться как новое меню падает под снимок 3. –

CSS парения картинка преобразования И не отключить

ответ

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