我正在尝试在 this article from CSS-tricks 之后的 Logo 上创建悬停状态，但我无法让它工作。
我使用的是 WordPress 主题，我只能编辑 CSS(和 JS，但我对此一无所知)。
CSS 技巧代码:
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 */
}
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 © 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 */
}
我尝试使用这些设置，但我已经没有想法了。
最佳答案
尝试修改该行:
.logo:hover img {
到 .banner:hover {
我还建议使用背景大小属性来修改背景图片的大小，以便元素保留其初始大小。 (否则，只有将鼠标悬停在图像的左上角区域时，它才会起作用。
/* 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;
}<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>对于您提供的代码片段，您需要包含background-size: 100%, 100%;
.logo img, .logo {
width: 50px;
/* Width of new image */
height: 50px;
}
.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: 100%, 100%;
}<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>关于html - 用 CSS 替换 <img> 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50380641/