如何使元素出現在另一個地方的懸停上

-2

如何讓.instagramhandle在.instagrambutton的懸停上出現？如何使元素出現在另一個地方的懸停上

代碼：

html ->https://pastebin.com/iDFjMh1a 
css ->https://pastebin.com/hKix29UB

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
    
 
body { 
 
    font-family: "Roboto", sans-serif; 
 
    margin: 0px; 
 
} 
 
    
 
div.topcontainer { 
 
    background-image: url("m.p2.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 500px; 
 
    -webkit-box-shadow: 0 6px 10px -5px black; 
 
    
 
    background-attachment: fixed; 
 
} 
 
    
 
div.bottomcontainer { 
 
    margin-top: 500px; 
 
    background-color: #AA3939; 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
} 
 
    
 
div.topbar { 
 
    position: fixed; 
 
    width: inherit; 
 
    
 
} 
 
    
 
.title { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    font-size: 50px; 
 
    margin-top: 25px; 
 
    margin-left: 25px; 
 
    
 
} 
 
    
 
.instagrambutton { 
 
    position: absolute; 
 
    width: 50px; 
 
    background-color: black; 
 
    padding: 10px; 
 
    top: 25px; 
 
    right: 25px; 
 
    transition: opacity 0.5s; 
 
} 
 
    
 
.instagrambutton:hover + .instagramhandle{ 
 
    display: block; 
 
    
 
} 
 
    
 
.instagramhandle { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 5px; 
 
    font-size: 20px; 
 
    top: 5px; 
 
    right: 100px; 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="masonStyleDef.css"> 
 
     <title>majic.photography</title> 
 
    </head> 
 
    <body> 
 
     <div class="topcontainer"> 
 
      <div class="topbar"> 
 
       <h1 class="title">majic<br>Photography</h1> 
 
       <p class="instagramhandle">majic.photography</p> 
 
       <a href="https://www.instagram.com/majic.photography/" target="_blank"><img src="instagram-logo-white.png" alt="majic.photography" class = "instagrambutton"></a> 
 
      </div> 
 
      <div class="bottomcontainer"> 
 
       <h1 class="title">ohhhh boio</h1> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-08-11 Joseph Long

如果你在這裏粘貼代碼，這將是有益的... –

這是不可能在CSS不改變HTML標記。但是，這可以使用JavaScript來完成，

var instaButton = document.getElementsByClassName('instagrambutton')[0]; 
var instaHandle = document.getElementsByClassName('instagramhandle')[0]; 

instaButton.addEventListener("mouseenter", function(event) { 
    instaHandle.style.display = 'block'; 
}); 

instaButton.addEventListener("mouseleave", function(event) { 
    instaHandle.style.display = 'none'; 
});

演示：

var instaButton = document.getElementsByClassName('instagrambutton')[0]; 
 
var instaHandle = document.getElementsByClassName('instagramhandle')[0]; 
 

 
instaButton.addEventListener("mouseenter", function(event) { 
 
    instaHandle.style.display = 'block'; 
 
}); 
 

 
instaButton.addEventListener("mouseleave", function(event) { 
 
    instaHandle.style.display = 'none'; 
 
})

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
    
 
body { 
 
    font-family: "Roboto", sans-serif; 
 
    margin: 0px; 
 
} 
 
    
 
div.topcontainer { 
 
    background-image: url("m.p2.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 500px; 
 
    -webkit-box-shadow: 0 6px 10px -5px black; 
 
    
 
    background-attachment: fixed; 
 
} 
 
    
 
div.bottomcontainer { 
 
    margin-top: 500px; 
 
    background-color: #AA3939; 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
} 
 
    
 
div.topbar { 
 
    position: fixed; 
 
    width: inherit; 
 
    
 
} 
 
    
 
.title { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 10px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    font-size: 50px; 
 
    margin-top: 25px; 
 
    margin-left: 25px; 
 
    
 
} 
 
    
 
.instagrambutton { 
 
    position: absolute; 
 
    width: 50px; 
 
    background-color: black; 
 
    padding: 10px; 
 
    top: 25px; 
 
    right: 25px; 
 
    transition: opacity 0.5s; 
 
} 
 
    
 
.instagrambutton:hover + .instagramhandle{ 
 
    display: block; 
 
    
 
} 
 
    
 
.instagramhandle { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    padding: 5px; 
 
    font-size: 20px; 
 
    top: 5px; 
 
    right: 100px; 
 
    display: none; 
 
}

<link rel="stylesheet" type="text/css" href="masonStyleDef.css"> 
 
<div class="topcontainer"> 
 
      <div class="topbar"> 
 
       <h1 class="title">majic<br>Photography</h1> 
 
       <p class="instagramhandle">majic.photography</p> 
 
       <a href="https://www.instagram.com/majic.photography/" target="_blank"><img src="instagram-logo-white.png" alt="majic.photography" class = "instagrambutton"></a> 
 
      </div> 
 
      <div class="bottomcontainer"> 
 
       <h1 class="title">ohhhh boio</h1> 
 
      </div> 
 
     </div>

來源

2017-08-11 05:02:30

請在這裏找到的代碼。只能用CSS。

[https://jsfiddle.net/Bhavani7/s1yduoLe/][1]

<div class="topcontainer"> 
     <div clasbs="topbar"> 
      <h1 class="title">majic<br>Photography</h1> 

     <div class="instagrambutton"><a href="https://www.instagram.com/majic.photography/" target="_blank"><img src="instagram-logo-white.png" alt="majic.photography"/></a><div class="instagramhandle"><p>majic.photography</p></div></div> 
     <div class="bottomcontainer"> 
      <h1 class="title">ohhhh boio</h1> 
     </div> 
    </div>

CSS：

@import url('https://fonts.googleapis.com/css?family=Roboto'); 

body { 
    font-family: "Roboto", sans-serif; 
    margin: 0px; 
} 

div.topcontainer { 
    background-image: url("m.p2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    position:absolute; 
    width: 100%; 
    height: 500px; 
    -webkit-box-shadow: 0 6px 10px -5px black; 

    background-attachment: fixed; 
} 

div.bottomcontainer { 
    margin-top: 500px; 
    background-color: #AA3939; 
    position:absolute; 
    width: 100%; 
    height: 100%; 

} 

div.topbar { 
    position: fixed; 
    width: inherit; 

} 

.title { 
    position: absolute; 
    background-color: black; 
    color: white; 
    padding: 10px; 
    padding-left: 15px; 
    padding-right: 15px; 
    font-size: 50px; 
    margin-top: 25px; 
    margin-left: 25px; 

} 

.instagrambutton { 
    position: absolute; 
    width: 50px; 
    background-color: black; 
    padding: 10px; 
    top: 25px; 
    right: 25px; 
    transition: opacity 0.5s; 
} 

.instagrambutton:hover .instagramhandle{ 
    display: block; 
} 

.instagramhandle { 
    position: absolute; 
    background-color: black; 
    color: white; 
    padding: 5px; 
    font-size: 20px; 
    top: 5px; 
    right: 100px; 
    display: none; 
}

來源

2017-08-11 05:12:26

如何使元素出現在另一個地方的懸停上

回答

相關問題