0

我有包含背景图像的 div，但我想让该图像可点击并指向某个站点。是否可以在 css 或 jquery HTML中执行此操作：

<div id="logincontainer">
</div>

CSS ：

  #loginContainer {
        -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
            no-repeat scroll center center #FF660D;  /*for example */
            border-color: #FFFFFF;
            border-image: none;
            border-right: medium solid #FFFFFF;
            border-style: none solid solid;
            border-width: medium;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            position: fixed;
            min-height:200px;
            right: 0;
            top: 0;
            vertical-align: super;
            width: 100%;
            z-index: 9999999;
        }

这是http://jsfiddle.net/a39Va/16/

我不确定是否有办法使背景图像在 div 中指向可点击？任何建议都会很棒。

4

4 回答 4

3

只需执行以下操作：

<a href="whereYouWantToGo"><div id="loginContainer'></div></a>

或者你也可以通过 JavaScript 和 jQuery 做到这一点

$('#loginContainer').click(function(e) { <Whatever you want to do here> });
于 2013-09-06T15:22:23.893 回答
1

为什么不使用锚？

<a href="link" id="logincontainer">
</a>

我更新了你的jsFiddle

除此以外 ：

  • 您可以单击任何元素，使其行为类似于 jQuery 的链接。
  • <div>如果您使用 html5，则可以将您的锚点包围<!DOCTYPE>（否则无效）
于 2013-09-06T15:21:24.563 回答
1

您需要修复z-index背景元素，正如其他人所说，添加锚点或 javascript 操作。另外，我在页面上添加了一些其余内容的示例。你需要看看两者是如何相互作用的。

这是一个更新的jsFiddle

HTML

<div id="loginContainer">
    <a href="#"></a>
</div>
<div class="content">
    <p>Something</p>
</div>

CSS

#loginContainer {
    background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
    no-repeat center #FF660D;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}
#loginContainer a {
    display: block;
    height: 100%;
    width: 100%;
}
.content {
    z-index: 2;
    position: relative;
    width: 200px;
    height: 100px;
    background: #fff;
    margin: 30px 0 0 30px;
}
于 2013-09-06T15:25:31.477 回答
1

这是一个小提琴

HTML

<div id="logincontainer" data-link="http://google.com"></div>

jQuery

$(function() {

  $('#logincontainer').hover(function() {

    var divLink = $(this).attr('data-link');

    $(this).wrap('<a href="' + divLink + '"></a>');

  });

});
于 2013-09-06T16:29:10.377 回答