链接 + div + 悬停 + 背景

Question

我想在我的新主页上显示菜单点。

一个菜单点包含几个元素 -> 图标 + 标题 + 描述。 那些菜单点应该是链接，所以我只是在它前面写了a href。 它有效，但看起来令人毛骨悚然，因为它将背景颜色更改为灰色。 （即使我将其声明为白色）。

CSS

@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('websymbols/websymbols-regular-webfont.woff') format('woff'),
    url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
    url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}

A { text-decoration: none; }
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover { text-decoration: none; }
A:focus { outline: none; }

.menuePoint {
width: 300px;
height: 70px;
position: relative;
display: inline-block;
float: none;
overflow: hidden;
text-align: left;
background: #fff;
padding-left: 10px;
}

.menuePointIcon {
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
float:left;
display:block;
text-shadow: 0px 0px 25px #0f76a6;
color: #0f76a6;
line-height: 66px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}

.menuePointTitle {
font-size: 25px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}

.menuePointDesc {
font-size: 18px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}

.menuePoint:hover .menuePointTitle {
opacity: 1;
color:#2676ac;
-webkit-animation:menuePointTitleAnimation 2s;
}

.menuePoint:hover .menuePointDesc {
-webkit-animation:menuePointDescAnimation 2s;
}

.menuePoint:hover .menuePointIcon {
font-size: 35px;
color: #0f76a6;
text-shadow: 0px 0px 20px #0f76a6;
opacity: 1;
}

@-webkit-keyframes menuePointTitleAnimation /* Safari and Chrome */
{
  from {
     -webkit-transform: translateX(110%);
  }

  50% {
     -webkit-transform: translateX(0%);
  }

  to {
     -webkit-transform: translateX(0%);
  }
}

@-webkit-keyframes menuePointDescAnimation /* Safari and Chrome */
{
  from {
     -webkit-transform: translateX(-110%);
  }

  50% {
     -webkit-transform: translateX(0%);
  }

  to {
     -webkit-transform: translateX(0%);
  }
}

HTML

    <div style="text-align: center;">
        <div class="menuePoint">
            <div class="menuePointIcon">A</div>
            <div class="menuePointTitle">Test</div>
            <div class="menuePointDesc">Test</div>
        </div>

        <div class="menuePoint">
            <div class="menuePointIcon">B</div>
            <div class="menuePointTitle">WiFi</div>
            <div class="menuePointDesc">Educ</div>
        </div>

        <a href="#">
        <div class="menuePoint">
            <div class="menuePointIcon">C</div>
            <div class="menuePointTitle">Kontakt</div>
            <div class="menuePointDesc">Email / Jobs</div>
        </div>
        </a>
    </div>

Answer 1

尝试指定border-width: 0px。