html 悬停元素更改背景壁纸
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 悬停元素更改背景壁纸相关的知识，希望对你有一定的参考价值。
body.default.locations {
html {
font-size: 20px;
}
@media (max-width: 768px) {
html {
font-size: 18px;
}
}
h1 {
font-size: 2.48832em;
text-align: center;
margin-bottom: 2rem;
line-height: 1.2;
}
@media (max-width: 768px) {
h1 {
font-size: 1.728em;
margin-bottom: 4%;
}
}
h2 {
color:white;
}
body {
line-height: 1.4;
}
iframe {
display: table-cell;
background-position: center;
overflow: hidden;
width: 100%;
margin: 10px 0;
height: auto;
}
.large-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: table;
position: relative;
}
@media (max-width: 768px) {
.large-container {
max-width: 30em;
display: block;
}
}
.richText-container {
max-width: 30em;
width: 95%;
margin: 0 auto;
clear: left;
margin-top: 2em;
}
@media (max-width: 768px) {
.richText-container {
padding-top: 4%;
margin-top: 0;
}
}
@media (max-width: 768px) {
.locations-panel {
min-width: initial;
display: inline-block;
width: 100%;
margin-top: 50vh;
}
}
.batonrouge-container, .ascension-container, .espanol-container {
min-width: 2.2em;
width: 300px;
vertical-align: middle;
color: white;
min-height:584px;
background: rgba(47,47,47,.8);
display: block;
margin: 20px auto;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
&:hover {
box-shadow: 0px 0px 60px rgba(0,0,0,.5);
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.1);
transition: all 200ms ease-in;
transform: scale(1.1);
}
}
div.location,
.hours {
max-width: 70%;
/*width: 100%;*/
margin: 0 auto;
padding: 2em 0;
}
.hours {
padding-top: 0;
}
div.location {
text-align: center;
}
div.location > span {
display: block;
font-size: 1em;
}
div.location a {
display: inline-block;
margin-top: .6rem;
}
@media (max-width: 768px) {
div.location {
text-align: center;
}
}
table {
border-collapse: collapse;
width: 100%;
border: 5px solid #005757;
}
@media (max-width: 768px) {
table {
margin: 0 auto;
}
}
table td,
table .multiple-hour-set + .single-hour-set {
padding: 5px;
border-style: solid;
border-width: 0px;
background-color: #005757;
color: #ffffff;
}
table tr:nth-of-type(even) td {
background-color: #006c6c;
}
table tr:nth-of-type(even) ~ .multiple-hour-set td {
background-color: #005757;
}
table tr:nth-of-type(odd) ~ .multiple-hour-set td {
background-color: #006c6c;
}
table .multiple-hour-set td {
border-color: transparent;
}
table .multiple-hour-set ~ .multiple-hour-set td {
padding: 0 0px 5px 3px;
}
table .multiple-hour-set + .single-hour-set td {
border-top: 2px solid #005757;
}
table .current-day td {
font-weight: bold;
background: white;
color: #000000;
}
a.button {
background: #00cccd;
color: #000000;
text-align: center;
line-height: 0;
text-transform: none !important;
font-size: .9em !important;
letter-spacing: 0 !important;
width: 100%;
max-width: 100%;
/* min-width: 49%; */
padding: 15px 0;
/* font-size: 16px!important; */
}
a.button span {
padding-left: 2px;
display: inline-block;
vertical-align: middle;
}
a.button svg {
height: 1.2em;
width: 1.2em;
vertical-align: middle;
display: inline-block;
}
a.button svg path {
fill: #000000;
}
.locations-panel {
margin: 80px auto;
}
#wallpaper {
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: .25s;
pointer-events: none;
}
div.batonrouge-container:hover ~ #wallpaper {
background-image: url("/SiteFiles/2465/css/images/test.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-moz-transition: all 200ms ease;
transition: all 200ms ease;
/*background: blue;*/
-webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 200ms; /* Firefox < 16 */
-ms-animation: fadein 200ms; /* Internet Explorer */
-o-animation: fadein 200ms; /* Opera < 12.1 */
animation: fadein 200ms;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
div.espanol-container:hover ~ #wallpaper {
background-image: url("https://images-na.ssl-images-amazon.com/images/I/81ep8rBNqFL._SX466_.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-moz-transition: all 200ms ease;
transition: all 200ms ease;
/*background: blue;*/
-webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 200ms; /* Firefox < 16 */
-ms-animation: fadein 200ms; /* Internet Explorer */
-o-animation: fadein 200ms; /* Opera < 12.1 */
animation: fadein 200ms;
/*background: blue;*/
}
div.ascension-container:hover ~ #wallpaper {
background-image: url("//schmoesknow.com/wp-content/uploads/2013/07/Nicolas-Cage-nicolas-cage-26969943-1982-1300.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-moz-transition: all 200ms ease;
transition: all 200ms ease;
/*background: blue;*/
-webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 200ms; /* Firefox < 16 */
-ms-animation: fadein 200ms; /* Internet Explorer */
-o-animation: fadein 200ms; /* Opera < 12.1 */
animation: fadein 200ms;
}
h2#campus-name {
min-height:70px;
font-size:28px;
}
} /*end the location page styling*/ <div class="richText-container">
<h1>Campuses</h1>
</div>
<div class="locations-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="large-container">
<div class="batonrouge-container">
<div class="location">
<a href="/baton-rouge"><h2 id="campus-name">Baton Rouge</h2></a>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3440.3899812527716!2d-91.07318194869958!3d30.42504488165577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8626a4a439ec1089%3A0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr%2C+Baton+Rouge%2C+LA+70816!5e0!3m2!1sen!2sus!4v1497996140008" width="150" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>10500 Sam Rushing Drive</span>
<span>Baton Rouge, LA 70816</span>
<a href="https://www.google.com/maps/place/Istrouma+Baptist+Church/@30.4248876,-91.0729781,17z/data=!4m13!1m7!3m6!1s0x8626a4a439ec1089:0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr,+Baton+Rouge,+LA+70816!3b1!8m2!3d30.4250449!4d-91.0709879!3m4!1s0x8626a4a46ef7e395:0x357716aa464aee6f!8m2!3d30.4244692!4d-91.0706968" class="button">Directions</a>
<a href="tel:2252950775" class="button">(225) 295-0775</a>
</div>
<div class="hours">
<table>
<tr class="multiple-hour-set">
<td>Sunday</td>
<td>9:15 am</td>
</tr>
<tr class="multiple-hour-set" >
<td></td>
<td>10:45 am </td>
</tr>
</table>
</div>
</div> <!-- ending the batonrouge-container -->
<div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->
</div> <!-- ending the large-container -->
</div>
<div class="col-md-4">
<div class="large-container">
<div class="ascension-container">
<div class="location">
<a href="/ascension"><h2 id="campus-name">ascension</h2></a>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3444.0675464250194!2d-90.95195208450833!3d30.32059648178265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5a0761ead6c00ee4!2sIstrouma+Baptist+Church+-+Ascension+Campus!5e0!3m2!1sen!2sus!4v1498050357922" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>39258 LA Hwy 42</span>
<span>Praireville, LA 70769</span>
<a href="https://www.google.com/maps/place/Istrouma+Baptist+Church+-+Ascension+Campus/@30.3205965,-90.9519521,17z/data=!4m13!1m7!3m6!1s0x8626b77387ce3da1:0x4bac1dac6d9308d3!2s39248+LA-42,+Prairieville,+LA+70769!3b1!8m2!3d30.3205965!4d-90.9497634!3m4!1s0x0:0x5a0761ead6c00ee4!8m2!3d30.3211909!4d-90.9477304" class="button">Directions</a>
<a href="tel:2252950775" class="button">(225) 295-0775</a>
</div>
<div class="hours">
<table>
<tr class="multiple-hour-set">
<td>Sunday</td>
<td>10:45 am</td>
</tr>
</table>
</div>
</div>
<div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->
</div>
</div>
<div class="col-md-4">
<div class="large-container">
<div class="espanol-container">
<div class="location">
<a href="/espanol"><h2 id="campus-name">ISTROUMA EN ESPAñOL</h2></a>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3440.3899812527716!2d-91.07318194869958!3d30.42504488165577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8626a4a439ec1089%3A0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr%2C+Baton+Rouge%2C+LA+70816!5e0!3m2!1sen!2sus!4v1497996140008" width="150" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>10500 Sam Rushing Drive</span>
<span>Baton Rouge, LA 70816</span>
<a href="https://www.google.com/maps/place/Istrouma+Baptist+Church/@30.4248876,-91.0729781,17z/data=!4m13!1m7!3m6!1s0x8626a4a439ec1089:0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr,+Baton+Rouge,+LA+70816!3b1!8m2!3d30.4250449!4d-91.0709879!3m4!1s0x8626a4a46ef7e395:0x357716aa464aee6f!8m2!3d30.4244692!4d-91.0706968" class="button">Directions</a>
<a href="tel:2252950775" class="button">(225) 295-0775</a>
</div>
<div class="hours">
<table>
<tr class="multiple-hour-set">
<td>Sunday</td>
<td>10:45 am</td>
</tr>
</table>
</div>
</div>
<div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->
</div> <!-- ending of .large-container -->
</div> <!-- ending of col-md-4 -->
</div>
</div>
</div> <!-- ending the locations panel wrapper -->以上是关于html 悬停元素更改背景壁纸的主要内容，如果未能解决你的问题，请参考以下文章