2016-03-31 6 views
0

HTMLkann nicht auf das Logo klicken, CSS Ausgabe

<div class="app-header-logo"> 
     <a href="/home"><img ng-src="img/..."/></a> 
    </div> 

CSS

.app-header-logo { 
    width: 48px; 
    height: 64px; 
    padding: 8px 0px 8px 0px; 
    margin: 0px 16px 0px 0px; 
    vertical-align: middle; 
    text-align: center; 
    background-color: #009530; 
    display: inline-block; 
} 

    .app-header-logo > img { 
     height: 32px; 
     margin: 8px 0px 8px 0px; 
    } 

Oben ist mein Code, ich will, wenn Benutzer klickt auf das Bild er bis zu einem gewissen Link umgeleitet werden muss, , aber wenn ich das Element überprüfe, sehe ich, dass ein Anchor-Tag da ist, aber ich kann nicht klicken, ich weiß nicht zu viel von CSS, aber ich hoffe, dass dies ein CSS-Problem ist.

Da, wenn ich die obige Klasse "app-header-logo" entfernen kann ich klicken und auch Symbol - Cursor: Zeiger wird angezeigt.

Jede Hilfe wird geschätzt !!!

Dank

+0

Können zeigen Ihnen die volle HTML und CSS-Code? Es sieht so aus, als ob etwas über Ihrem Logo positioniert ist. Wenn Sie Ihren Code zeigen, können wir Fehler reproduzieren und dann finden Lösung – AlmasK89

+0

was passiert, wenn Sie auf das Logo klicken zeigt es keine 404 Fehler oder keine Reaktion –

+0

gerade passiert nichts, wenn ich auf das Logo klicke und sein Logo ist deaktiviert. Sogar kein Zeiger (Handsymbol) wird angezeigt, wenn ich auf das Bild hebe – shreyansh

Antwort

0

versuchen nun zu diesem css

.app-header-logo a {display:inline-block;vertical-align:top;} 

und entfernen diese

.app-header-logo a {display:block;} 

zu > dieses

.app-header-logo img { 
     height: 32px; 
     margin: 8px 0px 8px 0px; 
    } 

oder definierenist Inline-Element definieren Sie Block Hebel oder Inline-Block Level-Element.

+0

nein es funktioniert nicht – shreyansh

0

https://jsfiddle.net/4cedfvdk/

//CSS 
.app-header-logo { 
width: 48px; 
height: 64px; 
padding: 8px 0px 8px 0px; 
margin: 0px 16px 0px 0px; 
vertical-align: middle; 
text-align: center; 
background-color: #009530; 
display: inline-block; 

}

.app-header-logo img { 
    height: 32px; 
    margin: 8px 0px 8px 0px; 
    width:32px; 
} 
.app-header-logo img:hover{ 
    cursor:pointer; 
} 


//HTML 
<div class="app-header-logo"> 
     <a target=-blank href="https://www.google.com.pk/"><img  src="http://www.picdesi.com/upload/comment/friend/best-friends-quote-pic.jpg"/> </a> 
</div> 
+0

Ihre Js Geige ist leer und auch die Lösung, die Sie nicht zur Verfügung gestellt – shreyansh

+0

überprüfen Sie es jetzt jsfiddle Link nicht gespeichert –

0

versuchen mit diesem Code unten hier müssen Sie nur padding auf einen Link hinzufügen.

.app-header-logo { 
 
    width: 48px; 
 
    height: 64px; 
 
    padding: 8px 0px 8px 0px; 
 
    margin: 0px 16px 0px 0px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    background-color: #009530; 
 
    display: inline-block; 
 
} 
 

 
.app-header-logo > img{ 
 
    height: 32px; 
 
    margin: 8px 0px 8px 0px; 
 
} 
 
.app-header-logo>a{ padding : 4px 20px 50px 20px;}
<div class="app-header-logo"> 
 
    <a href="/home"><img ng-src="img/..."/></a> 
 
</div>