悬停不起作用以及网站上的其他悬停部分

-2

我在我的网站上有一个小错误我希望有人能帮助我。我使用'悬停'来让我的标识在有人将鼠标悬停在其上时闪烁。我在我的网站的导航标题栏中有两个徽标，一个在左侧，另一个在右侧。左侧始终如一地工作，右侧并非如此。右侧标志悬停非常有气质，并不总是像左侧标志上方的悬停一样工作。我是否对我的代码做了一些事情，让它像现在这样干？
我对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>

来源

2017-09-14 K Succar

您的网站被锁定并要求密码的概念。 – Aslam

您的代码中存在错误，例如错误顺序中的重复ID和结束标记。最好通过https://validator.w3.org/ –

通过W3C验证器运行你的页面对不起@hunzaboy我以为我禁用它！傻我！ –

你的方法是错误的，我的意见。你的代码的问题是你隐藏/显示悬停时会导致问题的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>

来源

2017-09-14 06:20:45 Aslam

谢谢！这很好！我需要学习如何整理我的编码和技术，我非常感谢帮助。快速的问题，如果你不介意，我失去了徽标背后的导航菜单。我解决了为#wrapperheader div添加透明背景颜色的问题......但它不允许我点击任何导航....（因为当然我有顶部的wrapperheader） - 你知道如何我能克服这个问题吗？我试图从flex中更改显示，但flex运行良好，我不知道要替换它。 –

所有不错 - 按其分类！感谢你的帮助 –

@hunzaboy已经很好地解释只是如果u瓦纳获得类似的笔记

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>

来源

2017-09-14 07:35:59

悬停不起作用以及网站上的其他悬停部分

回答

相关问题