我的WordPress CSS一夜之间停止工作了


My WordPress CSS stopped working overnight

昨晚和今天早上,我的WordPress网站工作正常。在此之前,我的CSS无法正常工作。

当你将鼠标悬停在一些嵌套在某些<li>下的菜单上时,应该会出现带有过渡的悬停效果。这停止工作,当页面加载时,我的猫头鹰旋转木马不显示,直到滚动功能被激活。

我怀疑这是我的缓存问题,但我尝试使用Stackpath CDN来解决这个问题,它没有改变任何东西。我真不知道该怎么办才好。

在自定义菜单中,鼠标悬停颜色的控件对菜单链接也不起作用

这是我的网站:stylehercloset.co.uk 这是我的JavaScript文件:
    jQuery(document).ready(function(){
  // owl caroussel
  jQuery(".owl-carousel").owlCarousel({
  items:1,
  navRewind:true,
  center:true,
  autoplay:true,
  autoplayTimeout:3000
  });
  /* end of owl caroussel */
  // adobe typekit
  try{
    Typekit.load({ async: true });
  }
  catch(e){}
  // end of typekit
   jQuery(window).scroll(function(){
  if(window.pageYOffset > 394){
   jQuery("#access").css({"position":"fixed", 
    "z-index":"2",
    "left":"0px",
    "top":"0px",
    "border":"0px",
    "border-width":"1px",
    "border-bottom-style":"solid",
    "margin-top":"auto"
    /*"padding-top":"2.5em" */});
 }
   if(window.pageYOffset < 394){
   jQuery("#access").css({"position":"initial",
    "padding":"0px",
    "border-top":"1px",
    "border-bottom":"1px",
    "border-top-style":"solid",
    "border-bottom-style":"solid",
    "margin-top":"0.5em"
  });
 } 
  }); // end of scroll function

  // code for the footer area
jQuery("#first,#second,#third,#fourth").addClass("col-xs col-sm-1 col-md-3 col-3");

jQuery("#footer-widget-area").addClass("row");

jQuery("#primary, #secondary").addClass("col-xs col-sm-3"); 
  jQuery(".small-nav i").click(function(){
   jQuery("div.menu").slideToggle("slow");
  });
});

这是我的style。CSS:

中相关的CSS
  #access .menu ul a:hover {
    background-color: #40E0D0 !important; }

这是我的functions。php文件

function customizer_css(){
   ?>
   <style type="text/css">
   *h1 {
    <?php echo get_theme_mod('h1_font'); ?>;
   }
   * h2 {
    <?php echo get_theme_mod('h2_font'); ?>;
   }
    *h3 {
    <?php echo get_theme_mod('h3_font'); ?>;
   }
    *h4 {
    <?php echo get_theme_mod('h4_font'); ?>;
   }
   *h5 {
    <?php echo get_theme_mod('h5_font'); ?>;
   }
  * p {
    <?php echo get_theme_mod('p_font'); ?>;
   }
   *a {
    <?php echo get_theme_mod('a_font'); ?>;
   }
    #site-title {
        <?php echo get_theme_mod('title_position'); ?>
        font-size:<?php echo get_theme_mod('title_size'); ?>em !important;
    }
   #primary a, #secondary a {
    <?php echo get_theme_mod('widget_a_font'); ?>;
   }
   #small-menu, #access, #wrapper,#footer #colophon{
        background-color:<?php echo get_theme_mod('website_colour') ?> !important; 
   }
    #header-bg {
    background-image: url('<?php echo get_header_image(); ?>');
    background-color: <?php echo get_theme_mod('header_colour'); ?> ;
    background-position: <?php echo get_theme_mod('header_bg_position_x_lg','0%'); ?> 
    <?php echo get_theme_mod('header_bg_position_y_lg','0%'); ?> !important;
   } 
    #main a, #footer-widget-area a {
      color: <?php echo get_theme_mod('link_colour'); ?> !important ;
      }
    .current_page_item a, #access .menu ul a:hover {
        background-color: <?php echo get_theme_mod('hover_colour'); ?> !important ;
    }
    #access .el:hover {
        color: <?php echo get_theme_mod('hover_colour'); ?> !important ;
    }
    h1#site-title a{
        <?php echo get_theme_mod('title_font_style'); ?>;
    } 
   @media screen and (max-width:767px) {
    #header-bg {
    background-position: <?php echo get_theme_mod('header_bg_position_x_xs','0%'); ?> 
    <?php echo get_theme_mod('header_bg_position_y_xs','0%'); ?> !important;
   }
        #site-title {
        <?php echo get_theme_mod('title_position_xs'); ?>
        font-size:<?php echo get_theme_mod('title_size_xs'); ?>em !important;
    } 

   } /* end of mobile size */
   @media screen and (min-width:768px) and (max-width:991px){
        #header-bg {
     background-position: <?php echo get_theme_mod('header_bg_position_x_sm','0%'); ?> 
    <?php echo get_theme_mod('header_bg_position_y_sm','0%'); ?> !important;
   }
    #site-title {
        <?php echo get_theme_mod('title_position_sm'); ?>
        font-size:<?php echo get_theme_mod('title_size_sm'); ?>em !important;
    }
   } /* end of small*/
   @media screen and (min-width:992px) and (max-width:1199px){
        #header-bg {
        background-position: <?php echo get_theme_mod('header_bg_position_x_md','0%'); ?> 
    <?php echo get_theme_mod('header_bg_position_y_md','0%'); ?> !important;
   }
     #site-title {
        <?php echo get_theme_mod('title_position_md'); ?>
        font-size:<?php echo get_theme_mod('title_size_md'); ?>em !important;
    }

   }  // end of medium
   </style>
 <?php
}

//add actions
add_action('wp_enqueue_scripts','style_n_scripts');
//theme customizer api
add_action( 'customize_register', 'customizer_api' );
//theme support
add_action('init', 'shc_theme_support');
// theme customizer css
add_action( 'wp_head', 'customizer_css');

看起来像是CSS问题/冲突。当您在样式表的第386行中删除id为#access的元素上的float:left;时,它会得到修复并且您的carousel出现。

或者将类clearfix添加到id为#header的元素中。

阅读更多关于clearfix

在style.css line: 386中删除float#access { float:none; }