Моя ссылка на изображение HTML не будет работать?

Question

Моя ссылка на изображение HTML не будет работать?

0

У меня есть сайт www.gamesplinter.com, на который вы можете посмотреть. Есть изображения социальной сети, анимированные под большой синей кнопкой, и по какой-то причине <a href= "#"> работает.

Я пробовал много разных способов, но никто из них, похоже, не работает.

Целевой багги html

<div class = "social-icon">
<div class = "facebook"><a href = "#"><img src="img/icon/facebook.png" alt="" width="48" height="48" border="0" /></a></div>
<div class = "twitter"><a href = "#"><img src="img/icon/twitter.png" alt="" width="48" height="48" border="0" /></a></div>
<div class = "youtube"><a href = "https://youtube.com"><img src="img/icon/you_tube.png" alt="" width="48" height="48" border="0" /></a></div>
<div class = "google-plus"><a href = "#"><img src="img/icon/google+.png" alt="" width="48" height="48" border="0" /></a></div>
</div>

связанный css

 .social {
    z-index: 30;
    margin: 0 auto;
    margin-top: -30px;
    background-color: #274C8F;
    height: 110px;
    width: 110px;
    border-radius: 55px;
}

.social-icon {
    margin: 0 auto;
    position:relative;
    top: -28px;
    width: 48px;
}

.facebook { 
    z-index: -30;
    z-index: 60px;
    position:relative;
    top: -48px;
}

.twitter {
    z-index: -30;
    width: 48px;
    position:relative;
    top: -94px;
}

.youtube {
    z-index: -30;
    width: 48px;
    position:relative;
    top: -157px;
}

.google-plus {
    z-index: -30;
    width: 48px;
    position:relative;
    top: -207px;
}

Можете ли вы указать, что случилось?

crustycrabbe 19 дек. 2013, в 05:08

Источник

0

Они появляются в Chrome. Какой браузер вы используете?
Matthew Johnson 19 дек. 2013, в 04:12
0

изображения отображаются правильно в Chrome, Mozilla и IE тоже
Vipin Kumar Soni 19 дек. 2013, в 04:12
0

попробуйте обновить кеш вашего браузера
Scary Wombat 19 дек. 2013, в 04:14
0

все отлично работает в FF и IE 11
Amarnath Balasubramanian 19 дек. 2013, в 04:18
0

Кевин, что ты делаешь? Вы не видите изображения или ссылки не работают? Это реклама?
Milche Patern 19 дек. 2013, в 04:18
0

z-index класса facebook, твиттер, ютуб, гугл-плюс делают проблему
Vipin Kumar Soni 19 дек. 2013, в 04:42
0

z-index класса facebook, twitter, youtube, google-plus делают проблему. Уберите оттуда z-index, ссылки будут работать нормально
Vipin Kumar Soni 19 дек. 2013, в 04:48

Показать ещё 5 комментариев

Теги:

html

hyperlink

href

3 ответа

Ещё вопросы

Они появляются в Chrome. Какой браузер вы используете?
изображения отображаются правильно в Chrome, Mozilla и IE тоже
попробуйте обновить кеш вашего браузера
Кевин, что ты делаешь? Вы не видите изображения или ссылки не работают? Это реклама?
z-index класса facebook, твиттер, ютуб, гугл-плюс делают проблему
z-index класса facebook, twitter, youtube, google-plus делают проблему. Уберите оттуда z-index, ссылки будут работать нормально

Milche Patern · Answer 1 · 2013-12-19T02-02-00.000Z

В вашем якоре нет ссылки

<a href = "#"><img src="img/icon/facebook.png" alt="" width="48" height="48" border="0" /></a>

У держателя якоря также есть неправильный z-indez.

Попробуйте удалить его:

.facebook {
  position: relative;
  top: -48px;
  /* z-index: -30; */ /* <-- remove this */
}

Для остальной части вашего кодирования я настоятельно рекомендую вам проверить его на удаление BAD css

.facebook { 
    z-index: -30;
    z-index: 60px; /* <-- this is bad */
    position:relative;
    top: -48px;
}

И, по-видимому, никакой javascript не связан с этим, exerp анимация на windows.load.

function onmouseover(event) {
popularHover();
}
function anonymous(obj, _) {
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<html>\r\n<head>\r\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r\n <style>\r\n body {\r\n margin: 0px;\r\n padding: 0px;\r\n display: table;\r\n height: 100%;\r\n width: 100%;\r\n text-align: center;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n p {\r\n margin: 2px;\r\n font-family: Helvetica, Arial, sans-serif;\r\n font-size: 12px;\r\n }\r\n #content {\r\n display: table-cell;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n </style>\r\n</head>\r\n\r\n<body>\r\n\r\n<div style="text-align:center" id="content">\r\n <p id="text" style="display:none"></p>\r\n <img id="ghosty_block" src="'+
((__t=( ghosty_blocked ))==null?'':__t)+
'">\r\n <a id="action_once" href="#" onclick="return false"><img src="'+
((__t=( allow_once ))==null?'':__t)+
'" title="'+
((__t=( t('click2play_allow_once_tooltip') ))==null?'':_.escape(__t))+
'"></a>\r\n <a id="action_always" href="#" onclick="return false"><img src="'+
((__t=( allow_unblock ))==null?'':__t)+
'" title="'+
((__t=( t('click2play_allow_always_tooltip') ))==null?'':_.escape(__t))+
'"></a>\r\n</div>\r\n</body>\r\n</html>\r\n';
}
return __p;
}
function (e){e=x.event.fix(e);var n,r,i,o,a,s=[],l=g.call(arguments),u=(x._data(this,"events")||{})[e.type]||[],c=x.event.special[e.type]||{};if(l[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){s=x.event.handlers.call(this,e,u),n=0;while((o=s[n++])&&!e.isPropagationStopped()){e.currentTarget=o.elem,a=0;while((i=o.handlers[a++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(i.namespace))&&(e.handleObj=i,e.data=i.data,r=((x.event.special[i.origType]||{}).handle||i.handler).apply(o.elem,l),r!==t&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,e),e.result}}
function (e){if(e[x.expando])return e;var t,n,r,i=e.type,o=e,s=this.fixHooks[i];s||(this.fixHooks[i]=s=tt.test(i)?this.mouseHooks:et.test(i)?this.keyHooks:{}),r=s.props?this.props.concat(s.props):this.props,e=new x.Event(o),t=r.length;while(t--)n=r[t],e[n]=o[n];return e.target||(e.target=o.srcElement||a),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,s.filter?s.filter(e,o):e}
function (e,n){var r,i,o,a,s=[],l=n.delegateCount,u=e.target;if(l&&u.nodeType&&(!e.button||"click"!==e.type))for(;u!=this;u=u.parentNode||this)if(1===u.nodeType&&(u.disabled!==!0||"click"!==e.type)){for(o=[],a=0;l>a;a++)i=n[a],r=i.selector+" ",o[r]===t&&(o[r]=i.needsContext?x(r,this).index(u)>=0:x.find(r,this,null,[u]).length),o[r]&&o.push(i);o.length&&s.push({elem:u,handlers:o})}return n.length>l&&s.push({elem:this,handlers:n.slice(l)}),s}
function () {
//social circle
$('.social').mouseover(function() {
facebookMove();
twitterMove();
youtubeMove();
googleplusMove();
});
function facebookMove() {
$(".facebook").animate({
"top": -145
},100);
}
function twitterMove() {
$(".twitter").animate({
"top": 0
},300);
}
function youtubeMove() {
$(".youtube").animate({
"left": 100
},400);
}
function googleplusMove() {
$(".google-plus").animate({
"right": 100
},200);
}
}
function (e){var t,n=[],r=this,i=r.length;if("string"!=typeof e)return this.pushStack(x(e).filter(function(){for(t=0;i>t;t++)if(x.contains(r[t],this))return!0}));for(t=0;i>t;t++)x.find(e,r[t],n);return n=this.pushStack(i>1?x.unique(n):n),n.selector=this.selector?this.selector+" "+e:e,n}
function at(e,t,n,i){var o,a,s,l,u,c,d,m,y,x;if((t?t.ownerDocument||t:w)!==f&&p(t),t=t||f,n=n||[],!e||"string"!=typeof e)return n;if(1!==(l=t.nodeType)&&9!==l)return[];if(h&&!i){if(o=Z.exec(e))if(s=o[1]){if(9===l){if(a=t.getElementById(s),!a||!a.parentNode)return n;if(a.id===s)return n.push(a),n}else if(t.ownerDocument&&(a=t.ownerDocument.getElementById(s))&&v(t,a)&&a.id===s)return n.push(a),n}else{if(o[2])return M.apply(n,t.getElementsByTagName(e)),n;if((s=o[3])&&r.getElementsByClassName&&t.getElementsByClassName)return M.apply(n,t.getElementsByClassName(s)),n}if(r.qsa&&(!g||!g.test(e))){if(m=d=b,y=t,x=9===l&&e,1===l&&"object"!==t.nodeName.toLowerCase()){c=bt(e),(d=t.getAttribute("id"))?m=d.replace(nt,"\\$&"):t.setAttribute("id",m),m="[id='"+m+"'] ",u=c.length;while(u--)c[u]=m+xt(c[u]);y=V.test(e)&&t.parentNode||t,x=c.join(",")}if(x)try{return M.apply(n,y.querySelectorAll(x)),n}catch(T){}finally{d||t.removeAttribute("id")}}}return At(e.replace(z,"$1"),t,n,i)}
function (e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t}
function (e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else while(n[o]!==t)e[i++]=n[o++];return e.length=i,e}
function (e){return typeof x===i||e&&x.event.triggered===e.type?t:x.event.dispatch.apply(f.elem,arguments)}
function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
function (e,n){var r,i,o,s=n.button,l=n.fromElement;return null==e.pageX&&null!=n.clientX&&(i=e.target.ownerDocument||a,o=i.documentElement,r=i.body,e.pageX=n.clientX+(o&&o.scrollLeft||r&&r.scrollLeft||0)-(o&&o.clientLeft||r&&r.clientLeft||0),e.pageY=n.clientY+(o&&o.scrollTop||r&&r.scrollTop||0)-(o&&o.clientTop||r&&r.clientTop||0)),!e.relatedTarget&&l&&(e.relatedTarget=l===e.target?n.toElement:l),e.which||s===t||(e.which=1&s?1:2&s?3:4&s?2:0),e}
function () {
facebookMove();
twitterMove();
youtubeMove();
googleplusMove();
}
function facebookMove() {
$(".facebook").animate({
"top": -145
},100);
}
function (e,t,n,r){var i=x.isEmptyObject(e),o=x.speed(t,n,r),a=function(){var t=er(this,x.extend({},e),o);(i||x._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)}
function (e){var t;for(t in e)return!1;return!0}
function (e,t,n){var r=e&&"object"==typeof e?x.extend({},e):{complete:n||!n&&t||x.isFunction(e)&&e,duration:e,easing:n&&t||t&&!x.isFunction(t)&&t};return r.duration=x.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in x.fx.speeds?x.fx.speeds[r.duration]:x.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){x.isFunction(r.old)&&r.old.call(this),r.queue&&x.dequeue(this,r.queue)},r}
function (e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?x.queue(this[0],e):n===t?this:this.each(function(){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)})}
function (){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)}
function (e,n,r){var i;return e?(n=(n||"fx")+"queue",i=x._data(e,n),r&&(!i||x.isArray(r)?i=x._data(e,n,x.makeArray(r)):i.push(r)),i||[]):t}
function (){var t=er(this,x.extend({},e),o);(i||x._data(this,"finish"))&&t.stop(!0)}
function (e){return e.replace(D,"ms-").replace(L,H)}
function (e,t){return t.toUpperCase()}

а также

$( window ).load(function() {

//social circle
    $('.social').mouseover(function() {
        facebookMove();
        twitterMove();
        youtubeMove();
        googleplusMove();
    });

    function facebookMove() {
        $(".facebook").animate({
            "top": -145
        },100);
    }
    function twitterMove() {
        $(".twitter").animate({
            "top": 0
        },300);
    }
    function youtubeMove() {
        $(".youtube").animate({
            "left": 100
        },400); 
    }
    function googleplusMove() {
        $(".google-plus").animate({
            "right": 100
        },200); 
    }

});

Joe Morgan · Answer 2 · 2013-12-19T02-34-00.000Z

В HTML "#" есть значение Null. У вас нет нигде для вашей ссылки.

kirk · Answer 3 · 2013-12-19T02-09-00.000Z

Ваши ссылки не работают, потому что ваше значение href равно #. Это означает, что при нажатии он останется на одной странице.