如何从焦点轮廓中排除元素的父<div>元素

时间：2017-09-27 21:02:54

标签： css

我尝试修改<div>元素的轮廓，当它通过表格中的标签获得焦点时。 <div>元素用作按钮并包含单击事件。 <div>元素包含<svg>和<span>两个子元素。 <span>用于工具提示。

Div outline including Span Element

标记是这样的：

＆＃13;
＆＃13; 
.iconButton {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0E9AEF;
  height: 50px;
  width: 50px;
  cursor: pointer;
  border-radius: 5px;
  user-select: none;
}

.iconButton svg {
  width: 100%;
  height: 70%;
  fill: white;
}

.iconButton polygon {
  fill: white;
}

.labelButton {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.labelButton .iconButton {
  height: 30px;
  width: 30px;
  margin-right: 10px;
}

.labelButton .iconButton svg {
  height: 80%;
  width: 60%;
}

.iconButton {
  position: relative;
  display: flex;
}

.iconButton .toolTipText {
  visibility: hidden;
  background-color: #08090A;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 6px;
  padding: 5px 12px;
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: normal;
  width: auto;
}

.iconButton .toolTipText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #08090A transparent transparent transparent;
}

.iconButton:hover .toolTipText {
  visibility: visible;
}
＆＃13; 
<div class="iconButton" id="saveButton" tabindex="14">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 612 792;" version="1.1" viewBox="0 0 612 792" xml:space="preserve">
    <style type="text/css">
      .st0 {
        clip-path: url(#SVGID_2_);
        fill: #FFFFFF;
      }
    </style>
    <g>
      <g>
        <defs>
          <rect height="512" id="SVGID_1_" width="512" x="50" y="140"></rect>
        </defs>
        <clipPath id="SVGID_2_">
          <use style="overflow:visible;" xlink:href="#SVGID_1_"></use>
        </clipPath>
        <path class="st0" d="M562,619V254l0,0c-0.1-2.9-1.2-6.1-4.1-9L457.4,144.5c0,0-5.3-4.9-11.7-4.5l0,0H83c0,0-33,0-33,33v446    c0,0,0,33,33,33h446C529,652,562,652,562,619L562,619z M453,303c0,22-22,22-22,22H181c-22,0-22-22-22-22V198c0-22,22-22,22-22h250    c22,0,22,22,22,22V303L453,303z M526,594c0,22-22,22-22,22H108c-22,0-22-22-22-22V394c0-22,22-22,22-22h396c22,0,22,22,22,22V594    L526,594z M435,296v-91c0,0,0-15-15-15h-49c0,0-15,0-15,15v91c0,0,0,15,15,15h49C420,311,435,311,435,296L435,296z"></path>
      </g>
    </g>
  </svg>
  <span class="toolTipText">Save</span>
</div>
＆＃13;
＆＃13;
＆＃13;

我试图在css中定义以下内容

.iconButton .toolTipText:focus {
    outline: none;
}

各种其他排列试图从围绕按钮创建的轮廓中排除跨度。到目前为止，没有任何变化。

编辑 - 最终解决方案

感谢@Creaforge的指导，我们提出了以下解决方案。应该注意的是，在摘录编辑器/查看器中，轮廓位于按钮之外......但是在Chrome中它正确地围绕着按钮。

enter image description here

＆＃13;
＆＃13; 
.iconButton {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0E9AEF;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border-radius: 5px;
	user-select: none;
	position: relative;
	outline: none;
}

	.iconButton:focus svg {
		outline: auto;
	}

	.iconButton svg {
		width: 100%;
		height: 100%;
		padding: 15% 0;
		fill: white;
	}

	.iconButton polygon {
		fill: white;
	}

	.iconButton .toolTipText {
		visibility: hidden;
		background-color: #08090A;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		border-radius: 6px;
		padding: 5px 12px;
		position: absolute;
		z-index: 1;
		bottom: 120%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 11px;
		font-weight: normal;
		width: auto;
	}

		.iconButton .toolTipText::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #08090A transparent transparent transparent;
		}

	.iconButton:hover .toolTipText {
		visibility: visible;
	}
＆＃13; 
<div class="iconButton" id="saveButton" tabindex="14">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 612 792;" version="1.1" viewBox="0 0 612 792" xml:space="preserve">
    <style type="text/css">
      .st0 {
        clip-path: url(#SVGID_2_);
        fill: #FFFFFF;
      }
    </style>
    <g>
      <g>
        <defs>
          <rect height="512" id="SVGID_1_" width="512" x="50" y="140"></rect>
        </defs>
        <clipPath id="SVGID_2_">
          <use style="overflow:visible;" xlink:href="#SVGID_1_"></use>
        </clipPath>
        <path class="st0" d="M562,619V254l0,0c-0.1-2.9-1.2-6.1-4.1-9L457.4,144.5c0,0-5.3-4.9-11.7-4.5l0,0H83c0,0-33,0-33,33v446    c0,0,0,33,33,33h446C529,652,562,652,562,619L562,619z M453,303c0,22-22,22-22,22H181c-22,0-22-22-22-22V198c0-22,22-22,22-22h250    c22,0,22,22,22,22V303L453,303z M526,594c0,22-22,22-22,22H108c-22,0-22-22-22-22V394c0-22,22-22,22-22h396c22,0,22,22,22,22V594    L526,594z M435,296v-91c0,0,0-15-15-15h-49c0,0-15,0-15,15v91c0,0,0,15,15,15h49C420,311,435,311,435,296L435,296z"></path>
      </g>
    </g>
  </svg>
  <span class="toolTipText">Save</span>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你不能这样做因为焦点属于div，span没有焦点所以它不会起作用。但是，您可以创建另一个div的子元素和span的兄弟元素，并将outline添加到该元素中。

答案 1 :(得分：0)

嗯，你可以。

首先，您需要禁用父元素的轮廓。 然后当父母聚焦时，在孩子身上显示轮廓，如下所示：

.parent {
    outline: none;
}

.parent:focus .children{
    outline: auto; /* Or whatever outline style you need */
}

这是您更新的标记：

.iconButton {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0E9AEF;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border-radius: 5px;
	user-select: none;
	position: relative;
	outline: none;
}

.iconButton:focus svg{
	outline: auto;
}

.iconButton svg {
	width: 100%;
	height: 70%;
	padding:15% 0;
	fill: white;
}

.iconButton polygon {
	fill: white;
}

.labelButton .iconButton {
	height: 30px;
	width: 30px;
	margin-right: 10px;
}

.labelButton .iconButton svg {
	height: 80%;
	width: 60%;
}


.iconButton .toolTipText {
	visibility: hidden;
	background-color: #08090A;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	border-radius: 6px;
	padding: 5px 12px;
	position: absolute;
	z-index: 1;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: normal;
	width: auto;
}

.iconButton .toolTipText::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #08090A transparent transparent transparent;
}

.iconButton:hover .toolTipText {
	visibility: visible;
}
<div class="iconButton" id="saveButton" tabindex="14">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 612 792;" version="1.1" viewBox="0 0 612 792" xml:space="preserve">
    <style type="text/css">
				.st0 {
					clip-path: url(#SVGID_2_);
					fill: #FFFFFF;
				}
			</style>
	<g>
		<g>
			<defs>
				<rect height="512" id="SVGID_1_" width="512" x="50" y="140"></rect>
			</defs>
			<clipPath id="SVGID_2_">
				<use style="overflow:visible;" xlink:href="#SVGID_1_"></use>
			</clipPath>
			<path class="st0" d="M562,619V254l0,0c-0.1-2.9-1.2-6.1-4.1-9L457.4,144.5c0,0-5.3-4.9-11.7-4.5l0,0H83c0,0-33,0-33,33v446    c0,0,0,33,33,33h446C529,652,562,652,562,619L562,619z M453,303c0,22-22,22-22,22H181c-22,0-22-22-22-22V198c0-22,22-22,22-22h250    c22,0,22,22,22,22V303L453,303z M526,594c0,22-22,22-22,22H108c-22,0-22-22-22-22V394c0-22,22-22,22-22h396c22,0,22,22,22,22V594    L526,594z M435,296v-91c0,0,0-15-15-15h-49c0,0-15,0-15,15v91c0,0,0,15,15,15h49C420,311,435,311,435,296L435,296z"></path>
		</g>
	</g>
  </svg>
<span class="toolTipText">Save</span>
</div>

相关问题
最新问题