Ich habe ein div, das mit jquery umgeschaltet wurde, aber die Hintergrundfarbe, die ich für dieses div definiert habe, ist nur sichtbar, wenn ich

Question

starte nur mit html und JQuery aber der Titel ist ziemlich selbsterklärend. Ich habe 3 Bilder, und wenn ich in einem von ihnen klicken Sie schaltet einen div, dass ich mit einer anderen Hintergrundfarbe festgelegt, aber diese Farbe ist nur sichtbar, wenn ich die Bilder klicken

var source = ""; 
 
    
 
    $('.img-slide-down').click(function() { 
 
     var hidden; 
 
     console.log('hidden: ' + $(".information").is(":hidden")); 
 
     if (source == "" || source == $(this).attr('src')) { 
 
      hidden = $(".information").is(":hidden"); 
 
      $('.information').slideToggle();    
 
     } else { 
 
      hidden = $(".information").is(":hidden"); 
 
      $('.information').slideUp(); 
 
      $('.information').slideToggle(); 
 
     } 
 
     
 
     videoControl(!hidden); 
 
     source = $(this).attr('src'); 
 
      
 
    }); 
 

 
    function videoControl(bool) { 
 
     var video = document.getElementsByClassName('hmtlVideo')[0]; 
 
     console.log(bool); 
 
     if (bool) { 
 
      video.pause(); 
 
      video.currentTime = 0; 
 
     } else { 
 
      video.play(); 
 
     } 
 
    }

body { 
 
     background-color: #2c3d55; 
 
     color: #e8e9f3; 
 
    } 
 
    .border-box { 
 
     border: 2px solid red; 
 
     max-height: 100px; 
 
     height: 100px; 
 
     min-width: 200px; 
 
     border-radius: 20px; 
 
     display: inline-block; 
 
    } 
 
    
 
    .row-centered { 
 
     text-align: center; 
 
    } 
 
    .col-centered { 
 
     display: inline-block; 
 
     float: none; 
 
     /*text-align: center;*/ 
 
    } 
 
    
 
    .main-content{ 
 
     margin-top:3%; 
 
    } 
 
    
 
    .header { 
 
     background: #393d3f; 
 
     color: #e8e9f3; 
 
    } 
 
    .selected-item { 
 
     border-bottom-color: #4381c1; 
 
    } 
 
    .img-slide-down { 
 
     height: 180px; 
 
     width: 240px; 
 
     
 
    } 
 
    .img-box{ 
 
     position:relative; 
 
    } 
 
    .information { 
 
     margin-top: 1%; 
 
     display: none; 
 
     width: 100%; 
 
     background-color: #04395e; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container main-content"> 
 
      <div class="row row-centered"> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_house.jpg"/>   
 
       </div> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_road.jpg" /> 
 
       </div> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_water.jpg" /> 
 
       </div> 
 
       <div class="information"> 
 
        <video class="col-md-6 hmtlVideo" controls autoplay> 
 
         <source src="media/h2oF.mp4" type="video/mp4"/> 
 
        </video> 
 
        <div class="col-md-4"> 
 
         Lorem ipsum dolor sit amet, 
 
         consectetur adipiscing elit. 
 
         Cras sagittis pretium quam quis vehicula. 
 
         Ut quis tellus et diam tincidunt pretium. 
 
         
 
        </div> 
 
        
 
       </div> 
 
      </div> 
 
    
 
     </div>

Answer 1

Es sieht so aus, als ob Sie die div wo class=information umschalten. Wenn Sie möchten, dass die Hintergrundfarbe erhalten bleibt. Ich würde ein div schaffen, das .information wickelt und ihm die Hintergrundfarbe gibt, die Sie wünschen. Gib .information einen transparenten Hintergrund. Wie folgt aus:

HTML:

 <div class="container main-content"> 
     <div class="row row-centered"> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_house.jpg"/> 
      </div> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_road.jpg" /> 
      </div> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_water.jpg" /> 
      </div> 
      <div class="information-wrapper"> 
       <div class="information"> 
        <video class="col-md-6 hmtlVideo" controls autoplay> 
         <source src="media/h2oF.mp4" type="video/mp4"/> 
        </video> 
        <div class="col-md-4"> 
         Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit. 
         Cras sagittis pretium quam quis vehicula. 
         Ut quis tellus et diam tincidunt pretium. 
        </div> 
       </div> 
      </div> 
     </div> 

CSS:

.information { 
    display: none; 
    width: 100%; 
    background-color: transparent; 
} 

.information-wrapper { 
    margin-top: 1%; 
    background-color: #04395e; 
    height: 180px; 
    width: 100%; 
}