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

您可以为（例如）菜单元素的其他子元素设置样式，而您在＆＃34; on＆＃34;用鼠标光标的菜单元素。

例如，您可以添加：

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

..和.menu中 .menypic class 的所有元素将被缩放，而 .menu类的元素处于：悬停状态。

这是一个工作小提琴：https://jsfiddle.net/eukjxuqc/3/

编辑/更新： 阅读评论后，我希望这就是您所需要的。基本上，我认为这是你需要的（这不是你的代码，我创建新的例子只是为了让事情更容易理解）：

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

此外，新的小提琴链接： https://jsfiddle.net/Munja/eukjxuqc/5/

CSS悬停图片转换，不要禁用

1 个答案: