悬停的问题无法正常工作，也没有现场的其他悬停部分

我的网站上有一个小错误，希望有人可以帮助我。当有人将鼠标悬停在其上时，我正在使用"悬停"来使我的徽标闪烁。我的网站上的导航标头栏中有两个徽标，一个在左侧，一个在右侧。左侧的作品总是和右侧的。右侧徽标悬停非常气质，并不总是像悬停在左徽标上的悬停一样工作。我是否对编码做了一些事情，使其像在做什么？
我是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>

我认为您的技术是错误的。代码的问题在于，您正在隐藏/显示盘旋时会导致问题的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>

@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>

相关内容

最新更新

热门标签：