CSSのみ：

CSSのみ：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.body { 
 
    height: 100vh; 
 
    text-align: center; 
 
} 
 

 
.square { 
 
    width: 100vm; 
 
    height: 100vm; 
 
    /* For IE9 */ 
 
    width: 100vmin; 
 
    height: 100vmin; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-top: calc((100vh - 100vmin)/2); 
 
    background-image: url('https://ae01.alicdn.com/kf/HTB12ZJjMXXXXXa_aXXXq6xXFXXXE/3-Piece-Wall-font-b-Picture-b-font-Dreamy-font-b-Purple-b-font-font-b.jpg'); 
 
    font-size: 0; 
 
} 
 

 
.square:before { 
 
    content: ""; 
 
    height: 100%; 
 
} 
 

 
.square:before, 
 
.content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 
/* Firefox < 16 */ 
 

 
@-moz-keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 
/* Safari, Chrome and Opera > 12.1 */ 
 

 
@-webkit-keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 
/* Internet Explorer */ 
 

 
@-ms-keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 

 
/* Opera < 12.1 */ 
 

 
@-o-keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.content { 
 
    -webkit-animation: fadein 1s; 
 
    /* Safari, Chrome and Opera > 12.1 */ 
 
    -moz-animation: fadein 1s; 
 
    /* Firefox < 16 */ 
 
    -ms-animation: fadein 1s; 
 
    /* Internet Explorer */ 
 
    -o-animation: fadein 1s; 
 
    /* Opera < 12.1 */ 
 
    animation: fadein 1s; 
 
} 
 

 
#left-content { 
 
    background-size: cover; 
 
    width: 50vmin; 
 
    height: 100vmin; 
 
    float: left; 
 
} 
 

 
#right-content { 
 
    background-size: cover; 
 
    width: 50vmin; 
 
    height: 100vmin; 
 
    float: right; 
 
} 
 

 
#left-content:after { 
 
    background-size: cover; 
 
    width: 50vmin; 
 
    height: 100vmin; 
 
    float: left; 
 
    opacity: 0; 
 
    content: ' '; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#right-content:after { 
 
    background-size: cover; 
 
    width: 50vmin; 
 
    height: 100vmin; 
 
    float: right; 
 
    opacity: 0; 
 
    content: ' '; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#left-content:hover:after+.square { 
 
    background-image: url('https://ae01.alicdn.com/kf/HTB1EuKlLVXXXXcmXpXXq6xXFXXXd/E-HOME-Stretched-LED-Canvas-Print-Blue-Rose-Flash-Effect-LED-Flashing-font-b-Optical-b.jpg'); 
 
    opacity: 1; 
 
} 
 

 
#right-content:hover:after { 
 
    background-image: url('https://ae01.alicdn.com/kf/HTB12hyVPVXXXXbEaXXXq6xXFXXX8/-font-b-Canvas-b-font-Painting-Printed-Pictures-Paints-Wall-Hanging-font-b-Canvas-b.jpg'); 
 
    opacity: 1; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="body"> 
 
    <div class="square"> 
 
     <div class="content"> 
 
     <a href=""> 
 
      <div id="left-content"></div> 
 
     </a> 
 
     <a href=""> 
 
      <div id="right-content"></div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

それらのマウスオーバー1に変更する共通の背景を持つ2つのdivが

私は、次の手順を実行したいと思います。

DIV容器には2つのDIV（1と2）が入っています。マウスがDIV 1を超えると、DIV CONTAINERの背景イメージがimage1に変更されます。マウスがDIV 2上にあると、DIV CONTAINERの背景イメージがimage2に変わります。

私はCSSでこれを試してみたいと思います。

出典

2017-05-02 yoan26

あなたは私達にあなたのコードを表示することができますか？これまでに何を試しましたか？ – l3fty

申し訳ありません、私はそれを挿入するのを忘れました。ただそれを追加しました。 – yoan26

http://jsfiddle.net/Tymek/yrKRX/ここにあなたのアイデアがあります – Ferus7

body { width: 100%; margin: 0; padding: 0; } 
 
.container { 
 
    position: relative; 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
.div1, .div2 { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex: 1; 
 
    width: 50%; 
 
    height: 100%; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    text-shadow: 0 0 10px black; 
 
    color: hsla(0, 57.6%, 50%, 0.5); 
 
    background-color: hsla(0, 0%, 0%, 0.1); 
 
} 
 
.background1, .background2 { 
 
    position: absolute; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    display: none; 
 
    z-index: -1; 
 
} 
 
.background1 { 
 
    background: url("http://i.imgur.com/zFYHM67.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-size: cover; 
 
} 
 
.background2 { 
 
    background: url("http://i.imgur.com/nYKEFNF.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-size: cover; 
 
} 
 
.div1:hover ~ .background1 { 
 
    display: flex; 
 
} 
 
.div2:hover ~ .background2 { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div class="div1">Div 1</div> 
 
    <div class="background1"></div> 
 
    <div class="div2">Div 2</div> 
 
    <div class="background2"></div> 
 
</div>

フィドル

https://jsfiddle.net/Hastig/k652snyc/

出典

2017-05-02 07:57:11

ありがとう！背景画像のコンセプトでさらにうまくいきます:) – yoan26

だから、擬似要素と実際に可能です。私の例を見てください。

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
#main:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
#main { 
 
    height: 170px; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 

 
#div1 .show { 
 
    border-right: 1px solid black; 
 
} 
 

 
#div1:hover:before, #div2:hover:before { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
    pointer-events: none; 
 
} 
 

 
#div1:hover:before { 
 
    background: yellow; 
 
} 
 

 
#div2:hover:before { 
 
    background: green; 
 
} 
 

 
#div1, #div2 { 
 
    width: 50%; 
 
    display: block; 
 
    float: left; 
 
    text-align: center; 
 
    vertical-align: center; 
 
    box-sizing: border-box; 
 
    pointer-events: auto; 
 
} 
 

 
.show { 
 
    position: relative; 
 
    z-index: 2; 
 
    height: 168px; 
 
}

<div id="main"> 
 
    <div id="div1"> 
 
    <div class="show"> 
 
     div1 
 
    </div> 
 
    </div> 
 
    <div id="div2"> 
 
    <div class="show"> 
 
     div2 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-05-02 08:03:56 Huelfe

働いています！どうもありがとう！ – yoan26

ようこそ。 :) – Huelfe

答えて

関連する問題