如何使元素出现在另一个地方的悬停上
问题描述:
如何让.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>
答
这是不可能在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>
答
请在这里找到的代码。只能用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;
}
如果你在这里粘贴代码,这将是有益的... –