<div class="b3">
        <!-- <span>b3</span> -->
        <button>b3</button>
        <div class="b3__cont "></div>
        
      </div>

.b3{
    position: relative;
    width: 300px;
    height: 100px;
    background-color: #fc0;
    margin: 20px;
    z-index: 100;
  
    button{
      position: relative;
      pointer-events: all;
      top: 20%;
      left: 10px;
      display: inline-block;
      cursor: pointer;
      width: 80px;
      height: 40px;
      background: red;
    }
   
   
      // .b3__hidden
  
      &__cont {
        visibility: hidden;
        z-index: 100;
        position: absolute;
        top: 100px;
        width: 500px;
        height: 200px;
        background: linear-gradient(
          to right, 
          rgba(255, 255, 255, 0.76) 30%, 
          rgb(37, 204, 255));
        border: solid 3px black;
      }
  
      &__cont.__active{
        visibility: visible;
      }
  
  }

let b3 = document.querySelector(".b3 > button");
let b3Cont = document.querySelector(".b3__cont");

// b3.addEventListener("mouseover", fb3); //при наведении
b3.addEventListener("click", fb3); 

function fb3() {
  b3.style.background = "#00ff00";
  b3Cont.classList.add("__active");
}
// b3Cont.addEventListener("mouseout", fb3cont);
function fb3cont() {

  b3Cont.classList.remove("__active");
}
document.onclick = function() {
  if (b3Cont.classList.contains("__active")) { fb3cont()};
}