momasboy momasboy - 2 months ago 15
CSS Question

Hide/ show div outline

How can i show and hide div outline? I want the content inside the div to display at all times but the outline of the div display only on mouseover.



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>




Answer

The simplest way to achieve what you want is by using just CSS:

#boxes {
    border-color: transparent;
}

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

Snippet:

.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>

Alternatively, you can use JavaScript to set the border-color property to transparent on mouseout and back to 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");
});

Snippet:

$("#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>