Question

我正在创建一个矩形轮廓，在5px空的<div>周围有一个<div>细边框。当用户将鼠标悬停在边框上时，我希望边框改变颜色。这一切都运行正常，但我不希望当用户的鼠标在.outer { position: relative; overflow: hidden; display: inline-block; } .myborder { content: ''; position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6); } .myborder:hover { content: ''; position: absolute; bottom: 5%; left: 20%; width: 40%; height: 50%; box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6); }内时边框保持更改，因为它不再实际位于边框上。

在此处查看示例： https://jsfiddle.net/qbcc1trt/

<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  <div class="myborder"></div>
</div>

// Vendors
require("expose-loader?jQuery!jquery");

import 'metismenu';
import 'bootstrap';

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

有什么方法可以实现这个目标吗？

Answer 1

:hover个事件仅适用于最顶层的元素（以及里面的元素）。因此，您可以通过使另一个div与myborder相同的大小但减去边框的大小来实现此效果。然后将其直接放在myborder上方。

这样，悬停事件将在边界上触发（在您的情况下为框阴影）但不在内部。请参阅下面的演示

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.myborder {
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
}

.hover-cover {
  position: absolute;
  bottom: calc(5% + 5px);
  left: calc(20% + 5px);
  box-shadow: none;
  z-index: 1;
  width: calc( 40% - 10px);
  height: calc( 50% - 10px);
}
 

.myborder:hover {
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}

<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  
  <div class="hover-cover"></div>
  <div class="myborder"></div>
</div>

Answer 2

它与@Kevin提供的解决方案几乎相同：
https://jsfiddle.net/qbcc1trt/1/

这个想法是把两个元素，一个（B）放在另一个元素（A）之上，所以当用户将:hover元素B时，他实际上不会:hover元素A.
您需要确保元素B不在元素A

中

＆＃13;

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.borderContainer {
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
}
.myborder {
  content: '';
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}
.inner {
  position: absolute;
  width: calc(100% - 5px * 2);
  height: calc(100% - 5px * 2);
  top: 5px;
  left: 5px;
  z-index: 100;
}
.myborder:hover {
  content: '';
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="borderContainer">
  <div class="myborder">
  </div>
  <div class="inner">
  </div>
</div>
</div>

＆＃13;

请注意我在这里使用的是父容器（根据您的解决方案，这可能更容易）。

Answer 3

我知道答案已标记为已回答，但我找到了一个不使用calc的解决方案，而nth-child代替compatibility table而不是calc

＆＃13;

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.myborder {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
}

.myborder div:nth-child(1) {
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.myborder div:nth-child(1):hover {
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}

.myborder div:nth-child(2) {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

＆＃13;

<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  <div class="myborder">
    <div></div>
    <div></div>
  </div>
</div>

＆＃13;

触发CSS：仅在将鼠标悬停在边框

3 个答案: