Question

如何展示和隐藏div大纲？我希望div中的内容始终显示，但div的轮廓仅在鼠标悬停时显示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用单独的类来有条件地切换它，也可以使用: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');
}

Answer 2

实现目标的最简单方法是使用CSS：

#boxes {
    border-color: transparent;
}

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

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

或者，您可以使用JavaScript将 border-color 属性设置为 transparent mouseout >并返回 red 上的 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");
});

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

根据@KarthikeyanSekar的建议，您不需要Javascript，只需要：hover效果到您的container元素。

可以在this fiddle上找到帮助您进行可视化的示例，但基本上它是这样的：

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>

希望它有所帮助，干杯！

Answer 4

/*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;
    }

隐藏/显示div大纲

4 个答案: