微調一個css元素：懸停區域

我有一個小小的選項卡，出於某種原因，在該選項卡上應用懸停是非常麻煩的，實際懸停區域高於它。是什麼原因造成的，我該如何解決？微調一個css元素：懸停區域

的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"> [email protected] </h3> 
 
    </div> 
 
    </div>

來源

2016-10-21 Sergi

你必須做出一些改變

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"> [email protected] </h3> 
 
    </div> 
 
    </div>

以W ith你的風格就像我在下面的代碼片段 -

來源

2016-10-21 11:25:45

很好，謝謝。 – Sergi

我所有的榮幸:) –

雖然上面的答案觸發懸停爲.contact，但它仍然是越野車懸停在廣場上方。

在this jsfiddle我改變了一下方法。接觸.logo（因爲它沒有邏輯意義）並將float: left應用於兩者。而不是覆蓋它們並調整邊距以使接觸向左移動，我將從較低的寬度開始，並且在接觸時使用overflow: hidden;，並增加懸停時的寬度。

來源

2016-10-21 12:51:29 alexT12

微調一個css元素：懸停區域

回答

相關問題