javascript - 隐藏/显示 div 轮廓

Question

如何显示和隐藏 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>

Answer 1

实现您想要的效果的最简单方法是仅使用 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 并在mouseover 上返回red:

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>