Question

我尝试在this article from CSS-tricks之后的徽标上创建悬停状态，但我无法使其正常工作。

我使用WordPress主题，我只能编辑CSS（和JS，但我对此一无所知）。

CSS-Tricks代码：

HTML

<head>
  <title>Really Cool Page</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="//notrealdomain1.com/banner.png">
  </div>
</body>

CSS

/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

Website I'm working on

HTML

            <style>html{margin-top:0px!important;}#wpadminbar{top:auto!important;bottom:0;}}</style>
        <link rel="shortcut icon" type="image/png" href="http://couill.art/wp-content/uploads/2018/05/favicon.png" sizes="32x32">   </head>
    <body class="home page-template-default page page-id-15 logged-in is-frontend dynamic-mode mejs-semplice-ui"bgcolor="transparent">
        <div id="content-holder" data-active-post="15">

                        <header class="nav_k3sck19qn semplice-navbar active-navbar non-sticky-nav  menu-type-text cover-transparent scroll-to-top" data-cover-transparent="enabled" data-bg-overlay-visibility="hidden"data-mobile-fallback="disabled">
                            <div class="container" data-nav="logo-left-menu-right">
                                <div class="navbar-inner menu-type-text" data-xl-width="12" data-navbar-type="container">
                                    <div class="logo navbar-left"><a href="http://couill.art" title="Couillard"><img src="http://couill.art/wp-content/uploads/2018/05/logo-Couillart-gif.png" alt="logo"></a></div>
                                    <nav class="standard navbar-right" data-font="font_dqju2lgtu"><ul class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://couill.art/about"><span>?</span></a></li>
</ul></nav>
                                    <div class="hamburger navbar-right semplice-menu"><a class="open-menu menu-icon"><span></span></a></div>
                                </div>
                            </div>
                        </header>

                <div id="overlay-menu">
                    <div class="overlay-menu-inner" data-xl-width="12">
                        <nav class="overlay-nav" data-justify="center" data-align="align-middle" data-font="font_0kez4ul50">
                            <ul class="container"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://couill.art/about"><span>?</span></a></li>
</ul>
                        </nav>
                    </div>
                </div>


            <div id="content-15" class="content-container active-content  hide-on-init">
                <div class="sections">

                    <section id="section_2xzeiiwq2" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single" data-layout="fluid" data-gutter="no" data-height="dynamic" >

                        <div class="container">
                        <div id="row_ogt8idpm2" class="row"><div id="column_k1k9lrm15" class="column" data-xl-width="12" >
                    <div class="content-wrapper">

                <div id="content_g6nt8g63h" class="column-content" data-module="portfoliogrid">

        <div id="masonry-content_g6nt8g63h" class="masonry">
            <div class="masonry-item-width"></div>
            <div id="project-17" class="masonry-item thumb masonry-content_g6nt8g63h-item below" data-xl-width="6" data-sm-width="6" data-xs-width="12"><a href="http://couill.art/project/danger-zone">
                <div class="thumb-inner">

            <div class="thumb-hover">
                <div class="thumb-hover-meta top-left hide-both fade">
                    <p>
                        <span class="title" data-font="regular">Danger Zone</span><br />
                        <span class="category" data-font="regular">Animation</span>
                    </p>            
                </div>
            </div>


                    <img src="http://couill.art/wp-content/uploads/2018/05/Danger-Zone-0-00-39-00.jpg" width="1440" height="1080">
            </div></a><a class="regular" href="http://couill.art/project/danger-zone" title="Danger Zone"></a></div><div id="project-24" class="masonry-item thumb masonry-content_g6nt8g63h-item below" data-xl-width="6" data-sm-width="6" data-xs-width="12"><a href="http://couill.art/project/danger-ii">
                <div class="thumb-inner">

            <div class="thumb-hover">
                <div class="thumb-hover-meta top-left hide-both fade">
                    <p>
                        <span class="title" data-font="regular">Danger II</span><br />
                        <span class="category" data-font="regular">Animation</span>
                    </p>            
                </div>
            </div>


                    <img src="http://couill.art/wp-content/uploads/2018/05/Danger-Zone-0-00-37-04.jpg" width="1440" height="1080">
            </div></a><a class="regular" href="http://couill.art/project/danger-ii" title="Danger II"></a></div>
        </div>

        <script type="text/javascript">
            (function ($) {
                $(document).ready(function () {
                    // delete old css if there
                    $("#content_g6nt8g63h-style").remove();
                    // add css to head
                    $("head").append('<style id="content_g6nt8g63h-style" type="text/css">#masonry-content_g6nt8g63h{ margin: auto -0px !important; } .masonry-content_g6nt8g63h-item { margin: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; }#content-holder .thumb .thumb-inner .thumb-hover {background-color: rgba(0, 0, 0, 0.5);}#content-holder .thumb .thumb-hover-meta { padding: 2.22rem; }#content-holder .thumb .thumb-hover-meta .title { color: #ffffff; font-size: 1.33rem; text-transform: none; }#content-holder .thumb .thumb-hover-meta .category { color: #999999; font-size: 1rem; text-transform: none; }#content-holder #project-17 .thumb-inner .thumb-hover {background-color: rgba(0, 0, 0, 0.5);background-image: url(http://couill.art/wp-content/uploads/2018/05/danger-zone-titre-bis.png);background-size: cover;background-position: 50% 50%;}#content-holder #project-17 .thumb-hover-meta { padding: 2.22rem; }#content-holder #project-17 .thumb-hover-meta .title { color: #ffffff; font-size: 1.33rem; text-transform: none; }#content-holder #project-17 .thumb-hover-meta .category { color: #999999; font-size: 1rem; text-transform: none; }#content-holder #project-24 .thumb-inner .thumb-hover {background-color: rgba(0, 0, 0, 0.5);background-image: url(http://couill.art/wp-content/uploads/2018/05/Carlton-Dance-squelette.gif);background-size: cover;background-position: 50% 50%;}#content-holder #project-24 .thumb-hover-meta { padding: 2.22rem; }#content-holder #project-24 .thumb-hover-meta .title { color: #ffffff; font-size: 1.33rem; text-transform: none; }#content-holder #project-24 .thumb-hover-meta .category { color: #999999; font-size: 1rem; text-transform: none; }#content-holder #content_g6nt8g63h .thumb .post-title { padding-top: 1rem; } #content_g6nt8g63h .thumb .post-title, #content_g6nt8g63h .thumb .post-title a { color: #000000; font-size: 16px; text-transform: none; } #content_g6nt8g63h .thumb .post-title span, #content_g6nt8g63h .thumb .post-title a span { color: #999999; font-size: 14px; text-transform: none; padding-top: 0.4444444444444444rem; }</style>');
                    // define container
                    var $container = $("#masonry-content_g6nt8g63h");
                    // make jquery object out of items
                    var $items = $(".masonry-content_g6nt8g63h-item");

                    // fire masmonry
                    $container.masonry({
                        itemSelector: ".masonry-content_g6nt8g63h-item",
                        columnWidth: ".masonry-item-width",
                        transitionDuration: 0,
                        isResizable: true,
                        percentPosition: true,
                    });

                    // show images
                    showImages($container, $items);

                    // load images and reveal if loaded
                    function showImages($container, $items) {
                        // get masonry
                        var msnry = $container.data("masonry");
                        // get item selector
                        var itemSelector = msnry.options.itemSelector;
                        // append items to masonry container
                        //$container.append($items);
                        $items.imagesLoaded().progress(function(imgLoad, image) {
                            // get item
                            var $item = $(image.img).parents(itemSelector);
                            // fade in item
                            // layout
                            msnry.layout();
                            // fade in item
                            $item.css("opacity", 1);
                        });
                    }
                });
            })(jQuery);
        </script>

                </div>

                    </div>
                </div></div>
                        </div>
                    </section>              

                    <section id="section_866a48a67" class="content-block footercustom" data-column-mode-sm="single" data-column-mode-xs="single" data-valign="top" data-justify="center" data-layout="grid" data-gutter="yes" data-height="dynamic" >

                        <div class="container">
                        <div id="row_93abd0448" class="row"><div id="column_6a2300a14" class="column" data-xl-width="12" >
                    <div class="content-wrapper">

                <div id="content_42677fa93" class="column-content" data-module="code">

                <div class="is-content ce-code">
                    <h6>2018 &copy; Couillard<h6>
                </div>

                </div>

                    </div>
                </div></div>
                        </div>
                    </section>              

                </div>
            </div>
        </div>
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>  <div class="back-to-top">
        <a class="semplice-event" data-event-type="helper" data-event="scrollToTop"><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="53px" height="20px" viewBox="0 0 53 20" enable-background="new 0 0 53 20" xml:space="preserve">
<g id="Ebene_3">
</g>
<g>
    <polygon points="43.886,16.221 42.697,17.687 26.5,4.731 10.303,17.688 9.114,16.221 26.5,2.312   "/>
</g>
</svg>
</a>
    </div>
    <script type='text/javascript'>
/* <![CDATA[ */
var semplice = {"default_api_url":"http:\/\/couill.art\/wp-json","semplice_api_url":"http:\/\/couill.art\/wp-json\/semplice\/v1\/frontend","template_dir":"http:\/\/couill.art\/wp-content\/themes\/semplice4","category_base":"\/category\/","tag_base":"\/tag\/","nonce":"c683bb18db","frontend_mode":"dynamic","static_transitions":"disabled","site_name":"Couillard","base_url":"http:\/\/couill.art","frontpage_id":"15","blog_home":"http:\/\/couill.art","blog_navbar":"","sr_status":"enabled","blog_sr_status":"enabled","is_preview":"","password_form":"\r\n\t\t<div class=\"post-password-form\">\r\n\t\t\t<div class=\"inner\">\r\n\t\t\t\t<form action=\"http:\/\/couill.art\/wp-login.php?action=postpass\" method=\"post\">\r\n\t\t\t\t\t<div class=\"password-lock\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"35\" height=\"52\" viewBox=\"0 0 35 52\">\r\n  <path id=\"Form_1\" data-name=\"Form 1\" d=\"M31.3,25.028H27.056a0.755,0.755,0,0,1-.752-0.757V14.654a8.8,8.8,0,1,0-17.608,0v9.616a0.755,0.755,0,0,1-.752.757H3.7a0.755,0.755,0,0,1-.752-0.757V14.654a14.556,14.556,0,1,1,29.111,0v9.616A0.755,0.755,0,0,1,31.3,25.028Zm-3.495-1.514h2.743V14.654a13.051,13.051,0,1,0-26.1,0v8.859H7.192V14.654a10.309,10.309,0,1,1,20.617,0v8.859Zm4.43,28.475H2.761A2.77,2.77,0,0,1,0,49.213V25.28a1.763,1.763,0,0,1,1.755-1.766H33.242A1.763,1.763,0,0,1,35,25.28V49.213A2.77,2.77,0,0,1,32.239,51.988ZM1.758,25.028a0.252,0.252,0,0,0-.251.252V49.213a1.259,1.259,0,0,0,1.254,1.262H32.239a1.259,1.259,0,0,0,1.254-1.262V25.28a0.252,0.252,0,0,0-.251-0.252H1.758ZM20.849,43h-6.7a0.75,0.75,0,0,1-.61-0.314,0.763,0.763,0,0,1-.1-0.682l1.471-4.44a4.1,4.1,0,1,1,5.184,0L21.563,42a0.763,0.763,0,0,1-.1.682A0.75,0.75,0,0,1,20.849,43ZM15.2,41.487H19.8l-1.319-3.979a0.76,0.76,0,0,1,.33-0.891,2.6,2.6,0,1,0-2.633,0,0.76,0.76,0,0,1,.33.891Z\"\/>\r\n<\/svg>\r\n<\/div>\r\n\t\t\t\t\t<p>This content is protected. <br \/><span>To view, please enter the password.<\/span><\/p>\r\n\t\t\t\t\t<div class=\"input-fields\">\r\n\t\t\t\t\t\t<input name=\"post_password\" class=\"post-password-input\" type=\"password\" size=\"20\" maxlength=\"20\" placeholder=\"Enter password\" \/><a class=\"post-password-submit semplice-event\" data-event-type=\"helper\" data-event=\"postPassword\" data-id=\"15\">Submit<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/form>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t","gallery":{"prev":"<svg version=\"1.1\" id=\"Ebene_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"\n\twidth=\"18px\" height=\"40px\"  viewBox=\"0 0 18 40\" enable-background=\"new 0 0 18 40\" xml:space=\"preserve\">\n<g id=\"Ebene_2\">\n\t<g>\n\t\t<polygon points=\"16.3,40 0.3,20 16.3,0 17.7,1 2.5,20 17.7,39 \t\t\"\/>\n\t<\/g>\n<\/g>\n<\/svg>\n","next":"<svg version=\"1.1\" id=\"Ebene_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"\n\twidth=\"18px\" height=\"40px\" viewBox=\"0 0 18 40\" enable-background=\"new 0 0 18 40\" xml:space=\"preserve\">\n<g id=\"Ebene_2\">\n\t<g>\n\t\t<polygon points=\"0.3,39 15.5,20 0.3,1 1.7,0 17.7,20 1.7,40 \t\t\"\/>\n\t<\/g>\n<\/g>\n<\/svg>\n"},"menus":{"nav_k3sck19qn":{"html":"\r\n\t\t\t\t\t\t<header class=\"nav_k3sck19qn semplice-navbar active-navbar non-sticky-nav  menu-type-text cover-transparent scroll-to-top\" data-cover-transparent=\"enabled\" data-bg-overlay-visibility=\"hidden\"data-mobile-fallback=\"disabled\">\r\n\t\t\t\t\t\t\t<div class=\"container\" data-nav=\"logo-left-menu-right\">\r\n\t\t\t\t\t\t\t\t<div class=\"navbar-inner menu-type-text\" data-xl-width=\"12\" data-navbar-type=\"container\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"logo navbar-left\"><a href=\"http:\/\/couill.art\" title=\"Couillard\"><img src=\"http:\/\/couill.art\/wp-content\/uploads\/2018\/05\/logo-Couillart-gif.png\" alt=\"logo\"><\/a><\/div>\r\n\t\t\t\t\t\t\t\t\t<nav class=\"standard navbar-right\" data-font=\"font_dqju2lgtu\"><ul class=\"menu\"><li id=\"menu-item-28\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-28\"><a href=\"http:\/\/couill.art\/about\"><span>?<\/span><\/a><\/li>\n<\/ul><\/nav>\r\n\t\t\t\t\t\t\t\t\t<div class=\"hamburger navbar-right semplice-menu\"><a class=\"open-menu menu-icon\"><span><\/span><\/a><\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/header>\r\n\t\t\t\t\t\t\r\n\t\t\t\t<div id=\"overlay-menu\">\r\n\t\t\t\t\t<div class=\"overlay-menu-inner\" data-xl-width=\"12\">\r\n\t\t\t\t\t\t<nav class=\"overlay-nav\" data-justify=\"center\" data-align=\"align-middle\" data-font=\"font_0kez4ul50\">\r\n\t\t\t\t\t\t\t<ul class=\"container\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-28\"><a href=\"http:\/\/couill.art\/about\"><span>?<\/span><\/a><\/li>\n<\/ul>\r\n\t\t\t\t\t\t<\/nav>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t","css":".nav_k3sck19qn { background-color: transparent;; }.nav_k3sck19qn { height: 6.666666666666667rem; }.is-frontend #content-holder .sections { margin-top: 6.666666666666667rem; }.nav_k3sck19qn { padding-top: 3.3333333333333335rem; }.nav_k3sck19qn { padding-bottom: 3.3333333333333335rem; }.nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 2.7777777777777777rem; }.nav_k3sck19qn .navbar-inner .logo { align-items: center; }.nav_k3sck19qn .navbar-inner .hamburger { align-items: center; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { background-color: #2592ff; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }.nav_k3sck19qn .navbar-inner nav ul li a span { font-size: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner nav ul li a span { color: #2592ff; }.nav_k3sck19qn .navbar-inner nav ul li a { padding-left: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a { padding-right: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a span { text-transform: none; }.nav_k3sck19qn .navbar-inner nav ul li a span { letter-spacing: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a:hover span, .navbar-inner nav ul li.current-menu-item a span, .navbar-inner nav ul li.current_page_item a span { color: #000000; }.nav_k3sck19qn .navbar-inner nav ul li.current-menu-item a span { color: #000000; }.nav_k3sck19qn .navbar-inner nav ul li.current_page_item a span { color: #000000; }.single-project .navbar-inner nav ul li.portfolio-grid a span { color: #000000; }#overlay-menu { background-color: rgba(245, 245, 245, 1); }#overlay-menu .overlay-menu-inner nav { text-align: center; }#overlay-menu .overlay-menu-inner nav ul li a { padding-top: 0rem; }#overlay-menu .overlay-menu-inner nav ul li a { padding-bottom: 0rem; }#overlay-menu .overlay-menu-inner nav ul li a span { text-transform: none; }#overlay-menu .overlay-menu-inner nav ul li a span { border-bottom-color: #eaeaea; }#overlay-menu .overlay-menu-inner nav ul li a:hover span { color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span { color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { color: #000000; }.single-project #overlay-menu .overlay-menu-inner nav ul li.portfolio-grid a span { color: #000000; }#overlay-menu nav ul li a:hover span { border-bottom-color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span { border-bottom-color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { border-bottom-color: #000000; }.single-project #overlay-menu .overlay-menu-inner nav ul li.portfolio-grid a span { border-bottom-color: #000000; }@media screen and (min-width: 992px) and (max-width: 1169.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (min-width: 768px) and (max-width: 991.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (min-width: 544px) and (max-width: 767.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (max-width: 543.9px) { .nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}","mobile_css":{"lg":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","md":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","sm":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","xs":".nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }"}},"default":"nav_k3sck19qn","system_default":{"html":"\r\n\t\t\t\t\t\t<header class=\"nav_k3sck19qn semplice-navbar active-navbar non-sticky-nav  menu-type-text cover-transparent scroll-to-top\" data-cover-transparent=\"enabled\" data-bg-overlay-visibility=\"hidden\"data-mobile-fallback=\"disabled\">\r\n\t\t\t\t\t\t\t<div class=\"container\" data-nav=\"logo-left-menu-right\">\r\n\t\t\t\t\t\t\t\t<div class=\"navbar-inner menu-type-text\" data-xl-width=\"12\" data-navbar-type=\"container\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"logo navbar-left\"><a href=\"http:\/\/couill.art\" title=\"Couillard\"><img src=\"http:\/\/couill.art\/wp-content\/uploads\/2018\/05\/logo-Couillart-gif.png\" alt=\"logo\"><\/a><\/div>\r\n\t\t\t\t\t\t\t\t\t<nav class=\"standard navbar-right\" data-font=\"font_dqju2lgtu\"><ul class=\"menu\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-28\"><a href=\"http:\/\/couill.art\/about\"><span>?<\/span><\/a><\/li>\n<\/ul><\/nav>\r\n\t\t\t\t\t\t\t\t\t<div class=\"hamburger navbar-right semplice-menu\"><a class=\"open-menu menu-icon\"><span><\/span><\/a><\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/header>\r\n\t\t\t\t\t\t\r\n\t\t\t\t<div id=\"overlay-menu\">\r\n\t\t\t\t\t<div class=\"overlay-menu-inner\" data-xl-width=\"12\">\r\n\t\t\t\t\t\t<nav class=\"overlay-nav\" data-justify=\"center\" data-align=\"align-middle\" data-font=\"font_0kez4ul50\">\r\n\t\t\t\t\t\t\t<ul class=\"container\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-28\"><a href=\"http:\/\/couill.art\/about\"><span>?<\/span><\/a><\/li>\n<\/ul>\r\n\t\t\t\t\t\t<\/nav>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t","css":".nav_k3sck19qn { background-color: transparent;; }.nav_k3sck19qn { height: 6.666666666666667rem; }.is-frontend #content-holder .sections { margin-top: 6.666666666666667rem; }.nav_k3sck19qn { padding-top: 3.3333333333333335rem; }.nav_k3sck19qn { padding-bottom: 3.3333333333333335rem; }.nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 2.7777777777777777rem; }.nav_k3sck19qn .navbar-inner .logo { align-items: center; }.nav_k3sck19qn .navbar-inner .hamburger { align-items: center; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { background-color: #2592ff; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }.nav_k3sck19qn .navbar-inner nav ul li a span { font-size: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner nav ul li a span { color: #2592ff; }.nav_k3sck19qn .navbar-inner nav ul li a { padding-left: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a { padding-right: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a span { text-transform: none; }.nav_k3sck19qn .navbar-inner nav ul li a span { letter-spacing: 0rem; }.nav_k3sck19qn .navbar-inner nav ul li a:hover span, .navbar-inner nav ul li.current-menu-item a span, .navbar-inner nav ul li.current_page_item a span { color: #000000; }.nav_k3sck19qn .navbar-inner nav ul li.current-menu-item a span { color: #000000; }.nav_k3sck19qn .navbar-inner nav ul li.current_page_item a span { color: #000000; }.single-project .navbar-inner nav ul li.portfolio-grid a span { color: #000000; }#overlay-menu { background-color: rgba(245, 245, 245, 1); }#overlay-menu .overlay-menu-inner nav { text-align: center; }#overlay-menu .overlay-menu-inner nav ul li a { padding-top: 0rem; }#overlay-menu .overlay-menu-inner nav ul li a { padding-bottom: 0rem; }#overlay-menu .overlay-menu-inner nav ul li a span { text-transform: none; }#overlay-menu .overlay-menu-inner nav ul li a span { border-bottom-color: #eaeaea; }#overlay-menu .overlay-menu-inner nav ul li a:hover span { color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span { color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { color: #000000; }.single-project #overlay-menu .overlay-menu-inner nav ul li.portfolio-grid a span { color: #000000; }#overlay-menu nav ul li a:hover span { border-bottom-color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span { border-bottom-color: #000000; }#overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { border-bottom-color: #000000; }.single-project #overlay-menu .overlay-menu-inner nav ul li.portfolio-grid a span { border-bottom-color: #000000; }@media screen and (min-width: 992px) and (max-width: 1169.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (min-width: 768px) and (max-width: 991.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (min-width: 544px) and (max-width: 767.9px) { .nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}@media screen and (max-width: 543.9px) { .nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }}","mobile_css":{"lg":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","md":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","sm":".nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }","xs":".nav_k3sck19qn .logo img, .nav_k3sck19qn .logo svg { width: 1.6666666666666667rem; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon { height: 4px; }.nav_k3sck19qn .navbar-inner .hamburger a.menu-icon span { margin-top: 2px; }"}}},"post_ids":{"work":"15","danger-zone":"17","danger-ii":"24","about":"27","28":"28","footer-duplicate":"35","footer-blanc-duplicate":"41","about-2":"48"},"transition":{"in":{"effect":"fadeIn","position":"normal","visibility":"transition-hidden","ease":"Linear","duration":0.6,"easing":"Power3.easeIn"},"out":{"effect":"fadeOut","position":"normal","visibility":"transition-hidden","ease":"Linear","duration":0.6,"easing":"Power3.easeIn"},"status":"enabled","preset":"fade","scrollToTop":"enabled"},"sr_options":{"easing":"ease-out","duration":"600"}};
/* ]]> */
</script>
<script type='text/javascript' src='http://couill.art/wp-content/themes/semplice4/assets/js/frontend.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://couill.art/wp-includes/js/wp-embed.min.js?ver=4.9.5'></script>
    </body>
</html>

我的额外CSS

.logo:hover img {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(http://couill.art/wp-content/uploads/2018/05/logo-Couillart.gif) no-repeat;
    width: 50px; /* Width of new image */
    height: 50px; /* Height of new image */
    padding-left: 50px; /* Equal to width of new image */
}

我尝试过使用这些设置，但我的想法已经用完了。

Answer 1

尝试修改该行： <template> <div> <select class="custom-select" @selected="this.$emit('select-cat',category)"> <option v-for="category in categories">{{ category.title }}</option> </select> </div> </template> <script> import axios from 'axios'; export default { data() { return { categories: [], errors: [] } }, created() { axios.get(`http://localhost:3000/categories`) .then(response => { this.categories = response.data; console.log(response.data); }) .catch(e => { this.errors.push(e) }) } } </script> 到<template> <div class="card"> <div class="card-header"> <h4>Dodaj nowy wydatek</h4> </div> <form v-on:submit.prevent="addExpense"> <div class="card-body"> <div class="form-group"> <label for="expense-name">Nazwa wydatku</label> <input type="text" class="form-control" id="expense-name" v-model="Expense.title"> </div> <div class="form-group"> <label for="expense-amount">Wartość</label> <input type="number" class="form-control" id="expense-amount" v-model="Expense.amount"> </div> <div class="form-group"> <label for="expense-date">Data wydatku</label> <input type="date" class="form-control" id="expense-date" v-model="Expense.date"> </div> <div class="form-group"> <label for="expense-category">Kategoria</label> <select-category @select-cat="chooseCategory" v-model="Category.id"></select-category> </div> <br> <div class="form-group"> <button class="btn btn-primary" @click="showAlert">Dodaj nowy wydatek</button> </div> </div> </form> </div> </div> </template> <script> import axios from 'axios'; import selectCategory from './selectCategory.vue'; export default { components: { 'select-category': selectCategory }, data(){ return { Expense: { title:'', amount: '', date:'', categoryId:'' }, } }, methods : { chooseCategory(){ this.Expense.categoryId = this.Category.id }, showAlert(){ this.$alert.success({ message: 'Wydatek dodany poprawnie' }) }, addExpense(){ let newExpense = { title : this.Expense.title, amount : this.Expense.amount, date : this.Expense.date, categoryId: this.Expense.categoryId } console.log(newExpense); axios.post(`http://localhost:3000/expenses`, newExpense) .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }) } } } </script>
我还建议使用background size属性来修改背景图片的大小，以便元素保留其初始大小。（否则只有当你徘徊在图像的左上角区域时它才会起作用。

＆＃13;

.logo:hover img {

＆＃13;

.banner:hover {

＆＃13;

对于您提供的代码段，您需要添加/* All in one selector */ .banner { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://www.picture-newsletter.com/arctic/arctic-06_small.jpg) no-repeat; width: 180px; /* Width of new image */ height: 236px; /* Height of new image */ padding-left: 180px; /* Equal to width of new image */ background-size: 100% 100%; } .banner:hover { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://www.picture-newsletter.com/arctic/arctic-02_small.jpg) no-repeat; background-size: 50px, 50px; }

＆＃13;

<head>
  <title>Really Cool Page</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="http://www.picture-newsletter.com/arctic/arctic-03_small.jpg">
  </div>
</body>

＆＃13;

background-size: 100%, 100%;

＆＃13;

Answer 2

您的图片比您指定的图片大。不是CSS中的评论说＆＃34;新图像的大小＆＃34;。你的图像比这个大得多，左上角的50 x 50像素区域是白色的，所以它看起来不起作用。

您需要使用background-size:contain;

＆＃13;

.logo:hover img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://couill.art/wp-content/uploads/2018/05/logo-Couillart.gif) no-repeat;
  width: 50px;
  /* Width of new image */
  height: 50px;
  /* Height of new image */
  padding-left: 50px;
  /* Equal to width of new image */
  background-size: contain;
}

.logo img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
}

＆＃13;

<div class="logo navbar-left">
  <a href="http://couill.art" title="Couillard"><img src="http://couill.art/wp-content/uploads/2018/05/logo-Couillart-gif.png" alt="logo"></a>
</div>

＆＃13;

用CSS替换<img/>中的图像

2 个答案: