菜单项onclick调用一个multi-css onhover事件
Menu item onclick call a muti css onhover event
遇到一些困难,请提前感谢
我有一个看起来像的菜单
HTML
<li class="menuItem"><a href="#" class="drop" onclick="doWork();">Phones</a>
<div class="flyout">
<div class="col_1">
<a href="#"><h3>Phones</h3></a>
<ul>
<li><a href="https://www.google.com/" target="_top">Nokie</a></li>
<li><a href="https://www.google.com/" target="_blank">Iphone</a></li>
<
</ul>
</div>
</li>
带有2 css
.menuItem:hover {
border: 1px solid #777777;
/* Background color and gradients */
background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top, #fafafa 0%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(70%,#fcfcfc), color-stop(100%)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #fafafa 0%,#fcfcfc 100%); /* W3C */
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menuItem:hover .flyout
{
display:block;
top:auto;
left:0px;
}
如何在onclick函数上调用这2个类?
使用jQuery添加/删除或切换类:
$( document ).ready(function() {
$("p").click(function () {
$('.menuItem').addClass('flyout');
});
});
这在CSS:中
.flyout {
display:block;
top:auto;
left:0px;
}
相关文章:
- 单击更改图标并通过javascript添加一个css类
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 当CDN加载失败时,为字体添加一个本地CSS回退
- 如何使单选按钮在选择一个选项(CSS)后显示为选中状态
- 点击按钮创建一个带有css动画的放射状进度条
- 单击CSS框加载另一个网页.CSS 或 js
- Javascript,在按下按钮时添加一个删除CSS(重新加载快门)
- 一个包含css、html和javascript的框中的按钮
- 菜单项onclick调用一个multi-css onhover事件
- CSS的条件包含,但不作为最后一个(或第一个)CSS
- 启用段落的背景色<p>当有一个带有CSS的引导按钮时
- 从Objective C上的另一个JS(CSS)文件加载JS(CSS)文件
- 最好的做法是包含一个带有css/js的前端npm包
- 如何制作一个导入.css文件的按钮?
- 是否有一个JavaScript/css的方法,使同步滚动区域类似于"meld"
- 如何选择一个列表css类
- 一个消除CSS中供应商前缀的脚本
- 一个只有CSS的带有*pointer*的框
- 标记图像没有显示,只有最后一个因为 css