Javascript 仅在特定屏幕大小上悬停
我正在为手机创建一个菜单,到目前为止,除了效果之外,它还能正常工作。我试图在768px以上和768px以下的窗口上添加一个带有悬停效果的菜单到下拉子菜单。菜单应该全部显示出来,不会出现任何悬停效果 每当我加载初始窗口大小大于768px的网站时,悬停效果非常好,但一旦我减小窗口大小并尝试将鼠标悬停在小屏幕菜单上,子菜单就会在悬停时淡出。基本上,相反的效果正在发生 如果我加载的网站大小小于768px,菜单工作正常,直到我将窗口大小调整到768px以上。基本上根本没有悬停效果。子菜单甚至不会显示 我知道,我可以创建两个单独的菜单,一个用于移动设备,一个用于桌面,并分别设置它们的样式。但是,我想尝试只使用一个菜单,因此在整个HTML文档中也只使用一个nav.menu HTML正文 JavaScript:Javascript 仅在特定屏幕大小上悬停,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在为手机创建一个菜单,到目前为止,除了效果之外,它还能正常工作。我试图在768px以上和768px以下的窗口上添加一个带有悬停效果的菜单到下拉子菜单。菜单应该全部显示出来,不会出现任何悬停效果 每当我加载初始窗口大小大于768px的网站时,悬停效果非常好,但一旦我减小窗口大小并尝试将鼠标悬停在小屏幕菜单上,子菜单就会在悬停时淡出。基本上,相反的效果正在发生 如果我加载的网站大小小于768px,菜单工作正常,直到我将窗口大小调整到768px以上。基本上根本没有悬停效果。子菜单甚至不会显示 我知
这里有一个JSFIDLE演示了这个问题:这可以通过使用媒体查询来实现。创建第二个样式表,该样式表仅在窗口大小小于768px时生效。在该样式表中,删除导航链接的悬停效果。在样式表底部放置类似的内容:
@media only screen and (min-width: 768px){
ul{
li{
a:hover{
/*Your hover effect goes here */
}
}
}
}
@media only screen and (max-width: 767px){
ul{
li{
a{
}
}
}
}
在这里转储整个代码对您没有帮助,它会有什么帮助?您能创建一个JSFIDLE吗?我想知道你为什么不直接使用CSS媒体查询?@PapazzoKid我们必须切碎相关代码。。如果我在CMS中有一个查询,并不意味着我在这里复制了100页的代码:@Mr.Alien,对不起,伙计,我错误地标记了你。我的评论是针对OP的:请将答案标记为正确
/* HTML */
html { font-size: 100%; text-overflow: ellipsis; text-rendering: optimizelegibility; word-wrap: break-word; }
/* Body */
body { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; margin: 1.5rem 0 0; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
/* Paragraphs */
p { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 1rem 0; }
/* Links */
a { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; text-decoration: none; color: #0086eb; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:hover { text-decoration: underline; color: #333333; }
/* Images and Videos */
img, video { width: 100%; }
/* Youtube and Vimeo */
iframe[src*="vimeo"], iframe[src*="youtube"] { min-height: 32rem; width: 100%; }
/* Lists */
ul ul, ul ol, ol ul, ol ol { margin: 0.5rem 0; }
/* Blockquotes */
blockquote { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; line-height: 1.5; color: #888888; margin: 1rem 0 1rem 1rem; padding: 0 1rem; border-left: 4px solid #cccccc; background: #e1e1e1; }
/* Quotes */
q { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: italic; line-height: 1.5; color: #333333; }
/* Code Blocks */
pre { margin: 1rem 0 0; }
pre code { padding: 0.75rem; display: block; }
/* Inline Code */
code { font-size: 0.875rem; font-family: "Inconsolata", "Lucida Console", Monaco, monospace; font-weight: normal; line-height: 1.5; color: #0086eb; padding: 0.25rem; border: 1px solid #eeeeee; background: white; }
/* Forms */
form { margin: 0; }
/* Labels */
label { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0.25rem 1rem 0 0; display: inline-block; }
/* Input */
input { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 1rem 0 0; padding: 0 0.25rem; border: 1px solid #eeeeee; background: white; display: inline-block; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
input:active, input:focus { -webkit-box-shadow: 0 0 4px 0 #0086eb; -moz-box-shadow: 0 0 4px 0 #0086eb; box-shadow: 0 0 4px 0 #0086eb; }
/* Textarea */
textarea { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 1rem 0 0; padding: 0 0.25rem; border: 1px solid #eeeeee; background: white; display: inline-block; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
textarea:active, textarea:focus { -webkit-box-shadow: 0 0 4px 0 #0086eb; -moz-box-shadow: 0 0 4px 0 #0086eb; box-shadow: 0 0 4px 0 #0086eb; }
/* Input Submit */
input[type="submit"] { min-width: 0; margin: 0; padding: 0; }
/* Textarea Specific */
textarea { min-height: 6rem; }
/* Horizontal Rules */
hr { margin: 1.5rem 0; border: none; border-top: 1px solid #ccc; }
/* Figure */
figure img { display: block; }
/* Figure caption */
figcaption { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; background: #fafafa; padding: 0.5rem 1rem; -webkit-box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; -moz-box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; box-shadow: 0 -1px 0 0 #e1e1e1, 1px 0 0 0 #e1e1e1, -1px 0 0 0 #e1e1e1; }
/* Button and Submit Input */
button, input[type="submit"] { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: white; border: 1px solid #398ee5; background: linear-gradient(#3f9eff, #398ee5); margin: 1rem 0; padding: 0.5rem 1rem; outline: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
button:hover, input[type="submit"]:hover { color: #f2f2f2; background: linear-gradient(#2591ff, #2281e2); }
/* Definition List */
dl { max-width: 100%; }
dl dt { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; margin-top: 0.5rem 0 0 0; }
dl dd { font-size: 0.875rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; margin: 0 0 0 1.5rem; }
/* Table */
table { max-width: 100%; text-align: left; margin: 1rem 0; -webkit-box-shadow: 0 0 0 1px #e1e1e1; -moz-box-shadow: 0 0 0 1px #e1e1e1; box-shadow: 0 0 0 1px #e1e1e1; }
table tr { border-bottom: 1px solid #e1e1e1; }
table tr:last-of-type { border: none; }
table th { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.5; color: #333333; padding: 0.5rem 1rem; border-right: 1px solid #e1e1e1; }
table th:last-of-type { border: none; }
table td { font-size: 1rem; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #333333; padding: 0.5rem 1rem; border-right: 1px solid #e1e1e1; }
table td:last-of-type { border: none; }
/*
* ==================================================================== *
| 8. Menu
* ==================================================================== *
*/
.menu ul { padding: 0; margin: 0; }
.menu ul li { list-style: none; }
.menu-desktop { display: inline-block; position: relative; }
.menu-desktop > ul > li { display: inline-block; padding: 0 0.5rem; margin: 0 0.5rem; background: yellow; }
.menu-desktop li.has-sub ul { position: absolute; width: 8rem; background: red; }
$window = $(window);
$window.on("load resize scroll", function (e) {
function add_remove_menu_class() {
$window = $(window);
if ($window.width() > 768) {
var $menu = $('.menu');
if ($menu.hasClass('menu-mobile')) {
$menu.removeClass('menu-mobile')
}
if ($menu.hasClass('menu-desktop')) {} else {
$menu.addClass('menu-desktop')
}
}
if ($window.width() <= 768) {
var $menu = $('.menu');
if ($menu.hasClass('menu-desktop')) {
$menu.removeClass('menu-desktop')
}
if ($menu.hasClass('menu-mobile')) {} else {
$menu.addClass('menu-mobile')
}
}
}
function add_remove_item_class() {
$window = $(window);
if ($window.width() > 768) {
var $item = $('.menu ul li');
$item.has('ul').addClass('has-sub');
}
if ($window.width() <= 768) {
$item = $('.menu ul>li');
if ($item.hasClass('has-sub')) {
$item.removeClass('has-sub')
} else {}
}
}
function list_hack() {
var $item = $('.menu>ul>li.has-sub'),
$link = $('.menu>ul>li.has-sub>a');
$item.width($link.width())
}
function position_submenu() {
var $sub = $('.menu ul li ul li.has-sub>ul');
$sub.each(function () {
var $this = $(this),
$menu = $('.menu'),
$prevItem = $this.parent(),
$prevList = $prevItem.parent(),
$prevListLen = $prevList.children().length,
$prevListWidth = $prevList.width(),
$containerPos = $prevItem.index() + 1,
$topInt = (100 / $prevListLen) * $containerPos - (100 / $prevListLen),
$topPer = $topInt + '%';
if ($menu.hasClass('right')) {
$this.css({
'top': $topPer,
'marginLeft': -1 * $prevListWidth
});
} else {
$this.css({
'top': $topPer,
'marginLeft': $prevListWidth
});
}
});
(function () {
var $subFirst = $('.menu>ul>li.has-sub>ul'),
$menu = $('.menu'),
$item = $subFirst.parent(),
$itemWidth = (parseInt($item.css('marginLeft')) + parseInt($item.css('paddingLeft'))) * -1;
if ($menu.hasClass('right')) {
$subFirst.css({
'marginLeft': -1 * $itemWidth
});
} else {
$subFirst.css({
'marginLeft': $itemWidth
});
}
})();
}
// HERE IS WHERE THE PROBLEM STARTS
function hover_on_menu() {
var $menu = $('.menu-desktop'),
$item = $menu.find('li.has-sub'),
$list = $item.find('ul'),
$dirList = $menu.find('li.has-sub>ul');
$list.hide()
// THIS FUNCTION IN PARTICULAR
$item.each(function () {
var $this = $(this),
$list = $this.children('ul');
$this.hover(function () {
$list.stop().fadeToggle(200)
});
});
}
function clean_up_for_mobile() {
var $menu = $('.menu');
$menu.find('*').removeAttr('style');
$menu.find('*').removeAttr('class');
}
add_remove_menu_class()
add_remove_item_class()
if ($window.width() > 768) {
list_hack()
position_submenu()
hover_on_menu()
} else {
clean_up_for_mobile()
}
});
@media only screen and (min-width: 768px){
ul{
li{
a:hover{
/*Your hover effect goes here */
}
}
}
}
@media only screen and (max-width: 767px){
ul{
li{
a{
}
}
}
}