Question

我的网站上有一个小错误我希望有人可以帮助我。当有人将鼠标悬停在它上面时，我正在使用'悬停'来使我的徽标闪烁。我的网站上的导航标题栏中有两个徽标，一个在左侧，另一个在右侧。左侧工作总是非常奇妙，右侧则没有。右侧徽标悬停非常有气质，并不总是像悬停在左侧徽标上一样。我是否对我的编码做了一些事情，使它像它正在做的一样堵塞？我对CSS很新，所以我确信我的编码没有像我应该的那样正确。

网站为http://www.willothewisp.com.au/aboutkate/

div#wrapperHeader div#header {
  width:0px;
  height:40px;
  margin:0 auto;
}

div#wrapperHeader div#header .upperlogo { 
  width:250px;
  height:80px; 
  position: fixed; 
  top: 0; 
  left: 0; 
  border: 0; 
}

div#wrapperHeader div#header .upperlogob { 
  width:250px;
  height:80px; 
  position: fixed; 
  top: 0; 
  left: 0; 
  border: 0;
}

div#wrapperHeader div#header .lowerlogo { 
  width:78px; 
  height:78px;
  position: fixed; 
  top: 0; 
  right: 0; 
  border: 0;
}

div#wrapperHeader div#header .lowerlogob { 
  width:78px; 
  height:78px;
  position: fixed; 
  top: 0; 
  right: 0; 
  border: 0;
}

@media screen and (min-width: 1181px) {
  div#wrapperHeader div#header:hover .lowerlogo {
    display: none;
  }
  div#wrapperHeader div#header:hover .upperlogo {
    display: none;
  }
}

<div id="wrapperHeader">
    <div id="header">
        <a href="http://www.willothewisp.com.au/home-page">
            <img class="upperlogob" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59800933b3db2babbb993c09/1501563188704/2.png?format=1000w" />
    </div>
    </a>
    <div id="header">
        <a href="https://www.willothewisp.com.au/home-page">
            <img class="upperlogo" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c65c6c534a563924187a6/1500276173924/?format=1000w" />
    </div>
    </a>
    <div id="header">
        <a href="http://www.willothewisp.com.au/home-page">
            <img class="lowerlogob" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59b7669ba803bbc8f65ad97f/1505191581265/favcon+2.png?format=300w" />
    </div>
    </a>
    <div id="header">
        <a href="http://www.willothewisp.com.au/home-page">
            <img class="lowerlogo" img src="https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c67766b8f5bacd67d9504/1500276683429/?format=300w" />
    </div>
    </a>

Answer 1

我认为你的技术是错误的。您的代码的问题在于您隐藏/显示在悬停时导致问题的div。此外，您的HTML存在问题。

请使用此技术以获得更好的效果。

div#wrapperHeader div#header {
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.logo1 {
  background: url('https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c65c6c534a563924187a6/1500276173924/?format=1000w');
  width: 250px;
  height: 80px;
  display: block;
  background-size: contain;
}

.logo1:hover {
  background-image: url('https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59800933b3db2babbb993c09/1501563188704/2.png?format=1000w');
}

.logo2 {
  background: url('https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/59b7669ba803bbc8f65ad97f/1505191581265/favcon+2.png?format=300w');
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  display: block;
  background-size: contain;
}

.logo2:hover {
  background-image: url('https://static1.squarespace.com/static/57662f1ce4fcb52666c35448/t/596c67766b8f5bacd67d9504/1500276683429/?format=300w');
}

<div id="wrapperHeader">
  <div id="header">

    <a href="https://www.willothewisp.com.au/home-page" class="logo1">
    </a>
    <a href="https://www.willothewisp.com.au/home-page" class="logo2">
    </a>

  </div>
</div>

Answer 2

@hunzaboy已经解释得很好，如果你在类似的笔记上得到这个概念

div#wrapperHeader div#header {
    height: 40px;
    display: flex;
    justify-content: space-between;
}
.logo1 {
    background: url('http://www.supercoloring.com/sites/default/files/styles/coloring_full/public/cif/2016/07/batman-logo-coloring-page.png');
    width: 115px;
    height: 78px;
    display: block;
    background-size: contain;
}
.logo1:hover {
    background-image: url('http://www.vectortemplates.com/raster/batman-logo-big.gif');
}



<html>
<div id="wrapperHeader">
  <div id="header">

    <a href="http://www.dccomics.com/characters/batman" class="logo1">
    </a>
  </div>
</div>
</html>

悬停的问题与网站上的其他悬停部分不同

2 个答案: