Question

我有一个小标签从一个盒子里出来，由于某种原因，在该标签上应用悬停是非常错误的，实际的悬停区域高于它。造成这种情况的原因是什么？如何解决？

body {
  background-color: #F5F5F5;
  font-family: 'Open Sans Condensed', sans-serif;
  width: 90%;
  margin: 0 auto;
}
.logo {
  height: 250px;
  width: 250px;
  background-color: #FF7148;
  margin-top: 5%;
  margin-left: 5%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
  z-index: -1;
  box-shadow: 1px 1px 1px black;
}
.contact {
  height: 70px;
  width: 280px;
  position: relative;
  background-color: #FF7148;
  box-shadow: 1px 1px 1px black;
  top: -150%;
  z-index: -2;
  transition: all 0.5s ease;
}
.contact:hover {
  margin-left: 80%;
}
.contactText {
  margin-right: -15.5em;
  text-align: center;
  transform: rotate(90deg);
  font-family: 'Open Sans Condensed', sans-serif;
  color: white;
  padding-top: 40px;
}
.contactEmail {
  color: white;
  margin-top: -3.4em;
  text-align: center;
  padding-left: 5px;
}
.logoText {
  color: #F5F5F5;
  text-align: right;
  padding: 170px 10px;
}

<!-- use <header>, <nav>, <article>, <section>, <aside>, and <footer> -->
<header>
  <div class="logo">
    <h3 class="logoText"> Name <br> &nbsp &nbsp A Blog </h3>
    <div class="contact">
      <h3 class="contactText"> Contact </h3> 
      <h3 class="contactEmail"> Example@blabla.com </h3>
    </div>
  </div>

Answer 1

您必须进行一些更改

body {
    background-color: #f5f5f5;
    font-family: "Open Sans Condensed",sans-serif;
    margin: 0 auto;
    width: 90%;
}
.logo {
    background-color: #ff7148;
    box-shadow: 1px 1px 1px black;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 300;
    height: 250px;
    margin-left: 5%;
    margin-top: 5%;
    position: relative;
    width: 250px;

}
.contact {
    background-color: #ff7148;
    box-shadow: 1px 1px 1px black;
    height: 105px;
    position: absolute;
    top: 30px;
    transition: all 0.5s ease 0s;
    width: 280px;
    cursor: pointer;
}
.contact:hover {
    
    margin-left: 85%;
}
.contactText {
    color: white;
    font-family: "Open Sans Condensed",sans-serif;
    /* margin-right: -15.5em; */
    /* padding-top: 40px; */
    text-align: center;
    transform: rotate(90deg);
    transform-origin: 192px 85px 0;
}
.contactEmail {
    color: white;
    margin-top: -1.1em;
    padding-left: 5px;
    text-align: center;
}
.logoText {
    background: #ff7148 none repeat scroll 0 0;
    color: #f5f5f5;
    padding: 170px 10px 35px;
    position: relative;
    text-align: right;
    z-index: 1;
}

<header>
  <div class="logo">
    <h3 class="logoText"> Name <br> &nbsp &nbsp A Blog </h3>
    <div class="contact">
      <h3 class="contactText"> Contact </h3> 
      <h3 class="contactEmail"> Example@blabla.com </h3>
    </div>
  </div>

使用你的风格，就像我在下面的片段中所做的那样 -

Answer 2

虽然上面的答案触发了.contact的悬停，但当你将鼠标悬停在广场上方时仍然会出现问题。

在this jsfiddle中，我稍微改变了方法。从.logo中取出.contact（因为它没有逻辑意义）并将float: left应用于两者。我没有覆盖它们并调整边距以使.contact向左移动，而是在接触时以较低的宽度和overflow: hidden;开始，并在悬停时增加宽度。

微调css元素：悬停区域

2 个答案: