html - 微调一个 css 元素 :hover area

Question

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

JSFiddle:https://jsfiddle.net/nmr4wu2z/

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>

像我在下面的代码片段中那样采用你的风格 -