在不破坏我当前 CSS 的情况下制作图标可点击的 url

【问题标题】：Making icons clickable url without breaking my current CSS在不破坏我当前 CSS 的情况下制作图标可点击的 url
【发布时间】：2015-05-16 00:25:57
【问题描述】：

我正在尝试更新工作中的网站。我无论如何都不是网络程序员，我被困住了。

老板希望图标和文字可以点击。我目前知道文本会将用户发送到正确的页面，但我尝试使用各种教程使我的图像可点击，但它使我的布局偏离了方向。

我是否应该删除文本超链接，只让它们成为可点击的图像，然后尝试修复布局？

谢谢。

JSFiddle

HTML

<!-- StartServiceIconTable -->
<div class="networkicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="network.html">Network Integration and Management</p></a>

    </div>
</div>
<div class="paperlessicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="paperless.html">Paperless Office</p></a>

    </div>
</div>
<div class="webdesignicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="website.html">Website Design</p></a>

    </div>
</div>
<div class="securityicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="security.html">Security Solutions</p></a>

    </div>
</div>
<div class="disastericon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="disaster.html">Disaster Recovery</p></a>

    </div>
</div>
<div class="surveillanceicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="surveillance.html">Surveillance Camera Systems</p></a>

    </div>
</div>
<div class="cloudicon">
    <div class="boxaroundservicestext">
        <p class="services"><a href="backup.html">Cloud/Local Backup</p></a>

    </div>
</div>

CSS

.networkicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/pxOZ3BO.png");
    background-repeat: no-repeat;
}
.networkicon:hover {
    background-image: url("http://i.imgur.com/q9AYH52.png");
}
.paperlessicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/d2pyph4.png");
    background-repeat:no-repeat;
}
.paperlessicon:hover {
    background-image: url("http://i.imgur.com/p8aSg7g.png");
}
.webdesignicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/rgmqeM6.png");
    background-repeat: no-repeat;
}
.webdesignicon:hover {
    background-image: url("http://i.imgur.com/9Lqv2xE.png");
}
.securityicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/KVdCBHR.png");
    background-repeat:no-repeat;
}
.securityicon:hover {
    background-image: url("http://i.imgur.com/2YEL0Ff.png");
}
.disastericon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/fxpEZgv.png");
    background-repeat: no-repeat;
}
.disastericon:hover {
    background-image: url("http://i.imgur.com/ZLrcbA5.png");
}
.surveillanceicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/PClaFkQ.png");
    background-repeat:no-repeat;
}
.surveillanceicon:hover {
    background-image: url("http://i.imgur.com/ZCe0oEs.png");
}
.cloudicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/2ft1RiY.png");
    background-repeat: no-repeat;
}
.cloudicon:hover {
    background-image: url("http://i.imgur.com/f0RvsBV.png");
}
.boxaroundservicestext {
    height: 85px;
    padding-left: 90px;
    #padding-top: 28px;
    /*This is for IE*/
    line-height: 80px;
    text-align: center;
}
p.services {
    font: arial;
    font-size: 13px !important;
    color: black !important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
p.services a {
    font:arial;
    color: #333366;
}
p.services a:hover {
    font:arial;
    color: #FF7600;
}

【问题讨论】：

    标签： html css image url hyperlink


    【解决方案1】：

    研究以下示例并将其用作参考。

    使图片单独可点击

    HTML

    <a href="#"> <!-- Your image goes here --> </a>

    CSS

       a img { /* Refers to the image used as a link */
    /* Enter Styles Properties and values here */

    }

a  { /* Refers to the link. Image, text or whatever */

    /* Enter Styles Properties and values here */

    }

    使文本单独可点击

    HTML

    <a href="#"> I'm a text link </a>

    CSS

    a  {
/* Enter Styles Properties and values here */

}

    使文本和图像都可点击

    HTML

    <a href="#"> <!-- your image --> I'm a text link  </a>

    【讨论】：

      【解决方案2】：

      这里有一些代码FIDDLE：

      HTML：

      <!-- StartServiceIconTable -->
<a class="networkicon" href="network.html">
    <div class="boxaroundservicestext">
        <p class="services">Network Integration and Management</p>

    </div>
</a>
<a class="paperlessicon" href="paperless.html">
    <div class="boxaroundservicestext">
        <p class="services">Paperless Office</p>

    </div>
</a>
<a class="webdesignicon" href="website.html">
    <div class="boxaroundservicestext">
        <p class="services">Website Design</p>

    </div>
</a>
<a class="securityicon" href="security.html">
    <div class="boxaroundservicestext">
        <p class="services">Security Solutions</p>

    </div>
</a>
<a class="disastericon" href="disaster.html">
    <div class="boxaroundservicestext">
        <p class="services">Disaster Recovery</p>

    </div>
</a>
<a class="surveillanceicon" href="surveillance.html">
    <div class="boxaroundservicestext">
        <p class="services">Surveillance Camera Systems</p>

    </div>
</a>
<a class="cloudicon" href="backup.html">
    <div class="boxaroundservicestext">
        <p class="services">Cloud/Local Backup</p>

    </div>
</a>

      CSS：

      .networkicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/pxOZ3BO.png");
    background-repeat: no-repeat;
}
.networkicon:hover {
    background-image: url("http://i.imgur.com/q9AYH52.png");
}
.paperlessicon {

     height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/d2pyph4.png");
    background-repeat:no-repeat;
}
.paperlessicon:hover {
    background-image: url("http://i.imgur.com/p8aSg7g.png");
}
.webdesignicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/rgmqeM6.png");
    background-repeat: no-repeat;
}
.webdesignicon:hover {
    background-image: url("http://i.imgur.com/9Lqv2xE.png");
}
.securityicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/KVdCBHR.png");
    background-repeat:no-repeat;
}
.securityicon:hover {
    background-image: url("http://i.imgur.com/2YEL0Ff.png");
}
.disastericon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/fxpEZgv.png");
    background-repeat: no-repeat;
}
.disastericon:hover {
    background-image: url("http://i.imgur.com/ZLrcbA5.png");
}
.surveillanceicon {
    height:85px;
    width:200px;
    float:left;
    margin-left:80px;
    background-image:url("http://i.imgur.com/PClaFkQ.png");
    background-repeat:no-repeat;
}
.surveillanceicon:hover {
    background-image: url("http://i.imgur.com/ZCe0oEs.png");
}
.cloudicon {
    height: 85px;
    width: 200px;
    float: left;
    margin-left: 40px;
    background-image: url("http://i.imgur.com/2ft1RiY.png");
    background-repeat: no-repeat;
}
.cloudicon:hover {
    background-image: url("http://i.imgur.com/f0RvsBV.png");
}
.boxaroundservicestext {
    height: 85px;
    padding-left: 90px;
    #padding-top: 28px;
    /*This is for IE*/
    line-height: 80px;
    text-align: center;
}
p.services {
    font: arial;
    font-size: 13px !important;
    color: black !important;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
p.services a {
    font:arial;
    color: #333366;
}
p.services a:hover {
    font:arial;
    color: #FF7600;
}

      【讨论】：

      【解决方案3】：

      如果您希望图标可点击并用作链接，请执行以下操作：

      <a href="www.myfile.html"><img src="rainbow.gif"></a>

      并删除 css 中的背景图像

      【讨论】：

        【解决方案4】：

        为什么不试试这样的标记：

        <a href="paperless.html">
    <div class="paperlessicon">
        <div class="boxaroundservicestext">
            <p class="services">Paperless Office</p>

        </div>
    </div>
</a>

        那么整个a标签容器都是可点击的

        【讨论】：

        • 我使用了这个，然后我在 CSS 中的每个图标上添加了cursor: pointer;，所以它可以在 IE 中使用。谢谢！！！
        • 如果我有任何声望，我会为你投票。 n00b 状态。
        猜你喜欢
        • 2010-11-04
        • 1970-01-01
        • 2011-08-19
        • 2014-08-13
        • 2021-11-18
        • 2014-08-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode