html - CSS悬停图片转换和不禁用

Question

我有这个代码:

<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>

而且效果非常好。当我将鼠标悬停在图片上时，它会变大一点，然后出现新菜单。工作完美。但是当我将鼠标悬停在菜单上时，图片会恢复到原来的大小。只要我在菜单中，就可以保持转换吗？

Answer 1

当您使用鼠标光标“位于”菜单元素上时，您可以为(例如)菜单元素的其他子元素设置样式。

例如你可以添加:

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

..当带有 .menu class 的元素处于悬停状态时，.menu 中所有带有 .menypic class 的元素将被缩放。

这是一个有效的 fiddle :https://jsfiddle.net/eukjxuqc/3/

编辑/更新: 阅读评论后，我希望这是您所需要的。基本上，我认为这就是您所需要的(这不是来自您的代码，我创建了新示例只是为了让事情更容易理解):

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

此外，新的 fiddle 链接: https://jsfiddle.net/Munja/eukjxuqc/5/