CSS懸停+ div不工作

所以，免責聲明，我約2天學習HTML和CSS。我認爲將我的簡歷轉化爲網站將是一個很酷的項目。但是，在設計體驗頁面時遇到了一些問題。理論上，我想將鼠標懸停在某個div上，然後顯示div中包含的一些文本。懸停部分工作，如果我只是使用：懸停而不是＃att1：懸停，但如果我這樣做，我不能有多個對象。希望這是有道理的。CSS懸停+ div不工作

我試圖爲每個創建一個div，只是製作一個div，但由於元素被放置在時間軸內，我無法獲得正確的頁面格式。

在一個側面說明，一旦這是固定的，有什麼辦法懸停只適用於圖像，而不是任何相關的邊距/填充？

下面是我得到了什麼：

#job1 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#job2 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#att1:hover + #job1 
 

 
{ 
 
\t display: block; 
 
} 
 

 
#att2:hover + #job2 
 

 
{ 
 
\t display: block; 
 
}

<div class = "timeline"> 
 
\t \t 
 
\t <div id = "line"></div> 
 
\t \t \t 
 
\t <a id = "att1" href = "#"><img id = "scintern" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t <a id = "att2" href = "#"><img id = "scdss" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t \t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job1"> 
 
\t \t \t 
 
\t <p class = "header">Santander Consumer USA, Inc.</p> 
 
\t <p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
\t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job2"> 
 
\t \t 
 
\t <p class = "header">Santander Consumer USA, Inc. 2</p> 
 
\t <p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
\t \t 
 
</div>

PS。我保證我現在研究了大約4個小時。不過，也許我沒有在正確的位置尋找，因爲這對我來說太新了。

來源

2017-01-02 Aaron

http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean –

元素，你想改變的元素必須是子元素，你正在盤旋 –

可以做，如果你改變了一點的HTML。將.textbox div放在錨後面。然後使用~來定位兄弟姐妹。 +是直接兄弟姐妹（如果它後來）。

#job1 { 
 
    display: none; 
 
} 
 
#job2 { 
 
    display: none; 
 
} 
 
#att1:hover ~ #job1 { 
 
    display: block; 
 
} 
 
#att2:hover ~ #job2 { 
 
    display: block; 
 
}

<div class="timeline"> 
 

 
    <div id="line"></div> 
 

 
    <a id="att1" href="#"> 
 
    <img id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo"> 
 
    </a> 
 
    <a id="att2" href="#"> 
 
    <img id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo"> 
 
    </a> 
 

 
    <div class="textbox" id="job1"> 
 

 
    <p class="header">Santander Consumer USA, Inc.</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 

 
    </div> 
 

 
    <div class="textbox" id="job2"> 
 

 
    <p class="header">Santander Consumer USA, Inc. 2</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 

 
    </div> 
 

 
</div>

來源

2017-01-02 23:30:24 pol

AH完美！我現在已經開始工作了。我不認爲我可以告訴它忽略時間軸的格式，對嗎？ – Aaron

你能指定你的意思是「時間軸」嗎？ –

你實際上不能「忽略」，但是你可以在'.textbox' divs上應用css屬性並使它們變爲'unset'。像'font-size：unset'。或者只是簡單地將它們設置爲您的首選值。 – pol

您正在使用的那一刻+的CSS選擇器被稱爲adjacent sibling selector。它將選擇緊跟元素的任何元素。這不符合你的需求。你最好用一點JavaScript來做這件事。你要做的是檢查你的圖像上的mouseenter和mouseleave eventes，然後相應地處理文本。以下是jQuery的一個實現，它是一個易於安裝的JavaScript庫。

要僅檢測圖像上的懸停，請不要將保證金應用於圖像，而只能填充到周圍的鏈接。

要在你的頁面中安裝jQuery，只需把下面的標籤在你的腦袋：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>

JavaScript的使用jQuery的標籤之後另一個腳本標籤插入，就像這樣：

<script> 
    Your code here... 
</script>

這裏而來的片段：

$("#scintern").mouseover(function() { 
 
    $("#job1").show(); 
 
}); 
 
$("#scintern").mouseleave(function() { 
 
    $("#job1").hide(); 
 
}); 
 

 
$("#scdss").mouseover(function() { 
 
    $("#job2").show(); 
 
}); 
 
$("#scdss").mouseleave(function() { 
 
    $("#job2").hide(); 
 
});

#att1, #att2 { 
 
    text-decoration: none; 
 
} 
 

 
#job1 { 
 
    display: none; 
 
} 
 
#job2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="timeline"> 
 
    <div id="line"></div> 
 
    <a href="#" id="att1"> 
 
     <img alt="Santander Logo" id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png"> 
 
    </a> 
 
    <a href="#" id="att2"> 
 
     <img alt="Santander Logo" id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png"> 
 
    </a> 
 
</div> 
 
<div class="textbox" id="job1"> 
 
    <p class="header">Santander Consumer USA, Inc.</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
</div> 
 
<div class="textbox" id="job2"> 
 
    <p class="header">Santander Consumer USA, Inc. 2</p> 
 
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
</div>

來源

2017-01-02 23:40:48

CSS懸停+ div不工作

回答

相關問題