Блог

Как я могу показать и скрыть контур div? Я хочу, чтобы содержимое внутри div отображалось постоянно, но контур div отображался только при наведении курсора мыши.

 function show_sidebar() {
  document.getElementById('boxes').style.visibility = "visible";
}

function hide_sidebar() {
  document.getElementById('boxes').style.visibility = "hidden";
}  

 .container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">

  <div class="container5" id="boxes">some thing</div>
</div>  

Самый простой способ добиться желаемого — использовать только CSS:

 #boxes {
    border-color: transparent;
}

#wrapper:hover #boxes {
    border-color: red;
}
  

Фрагмент:

 .container5 {
  background-color: transparent;
  width: 160px; /* resized it to fit inside the screen */
  height: 200px; /* resized it to fit inside the screen */
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid;
  position: absolute;
  overflow: hidden;
}

#boxes {
    border-color: transparent;
}

#wrapper:hover #boxes {
    border-color: red;
}  

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="container5" id="boxes">some thing</div>
</div>  

Кроме того, вы можете использовать JavaScript для установки border-color свойства в transparent on mouseout и обратно в red on mouseover :

JavaScript:

 document.getElementById('wrapper').onmouseover = function () {
  document.getElementById('boxes').style.borderColor = "red";
}

document.getElementById('wrapper').onmouseout = function () {
  document.getElementById('boxes').style.borderColor = "transparent";
}
  

jQuery:

 $("#wrapper").hover(function() {
  $("#boxes").css("border-color", "red");
},
function() {
  $("#boxes").css("border-color", "transparent");
});
  

Фрагмент:

 $("#wrapper").hover(function() {
  $("#boxes").css("border-color", "red");
},
function() {
  $("#boxes").css("border-color", "transparent");
});  

 .container5 {
  background-color: transparent;
  width: 160px; /* resized it to fit inside the screen */
  height: 200px; /* resized it to fit inside the screen */
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid transparent;
  position: absolute;
  overflow: hidden;
}  

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="container5" id="boxes">some thing</div>
</div>  

Вы можете либо использовать отдельный класс для его условного переключения, либо использовать :hover свойство. В интересах JavaScript я покажу первое. Демонстрация: https://jsfiddle.net/h8c33x9d /

CSS

 .container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}
.my-border {
    border: 1px solid red;
}
  

JavaScript

 function show_sidebar() {
    $('#boxes').addClass('my-border');
}

function hide_sidebar() {
     $('#boxes').removeClass('my-border');
}
  

Для этого вам не нужен Javascript, как предложил @KarthikeyanSekar, вам нужен только эффект:hover для вашего container элемента.

Пример, который поможет вам визуализировать, можно найти на этой скрипке, но по сути это выглядит так:

CSS:

 /* Remove the border from the .container5 style */
.container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
}

/* Add only the border when the mouse is hover it */

.container5:hover  {
  border: 1px solid red;
}
  

И HTML остается прежним, только удаляя привязки javascript:

 <div id="wrapper">
  <div class="container5" id="boxes">some thing</div>
</div>
  

Надеюсь, это поможет,
приветствия!

 /*Change border to transparent */

 .container5 {
        background-color: transparent;
        width: 220px;
        height: 320px;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        overflow: hidden;
        border: 1px solid transparent;
    }

    /*Add border color*/

    .container5:hover {
         border: 1px solid red;
    }