css - 链接 + Div + 悬停 + 背景

标签 css html hover

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

一个菜单点包含几个元素 -> 图标 + 标题 + 描述。 那些菜单点应该是链接,所以我就在它前面写了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>

最佳答案

尝试指定一个 border-width: 0px

关于css - 链接 + Div + 悬停 + 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14594482/

相关文章:

html - 登录 DNN 时如何定位 html 元素

html - 对 bxslider 的其中一个步骤感到困惑

html - 如何强制包装没有任何空白的长字符串?

javascript - 在输入焦点上打开 Windows 10 触摸键盘的数字版本

html - 如何修复导航菜单上的悬停和过渡?

html - LI 上的 100% 高度

css - 新开发的 Joomla 空白模板?

jquery - 通过 ajax 加载页面时,Javascript 不起作用

jquery 悬停和 setTimeout/clearTimeOut

css - Safari 保持悬停状态 CSS bug