Question

可以使链接的子节点而不是链接本身可以集中。但是也可以按照输入中的父链接进行操作吗？（没有javascript）因此，在下面的示例中，如果我关注div，我想要输入Google。

＆＃13;

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

＆＃13;

<a href="http://google.com" class="padded-button" tabindex="-1">
    <div class="button"  tabindex="0">button</div>
</a>

＆＃13;

注意：如果您使用鼠标/键盘，我会尝试创建一个像普通按钮一样的按钮，但是有一个更大的点按区域可以触摸。

Answer 1

没有js并非完全可能。您可以将样式应用于伪元素，即：

.padded-button:focus .button{ outline: 3px solid red; }

但是如果您实际关注锚标记的子元素，则按Enter键不会冒泡到父标记。

https://jsfiddle.net/Lentqf4u/

Answer 2

你可以试试这个：

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

<form method="get" action="http://google.com" class="padded-button" >
    <button class="button" type="submit" >button</button>
</form>

基于此：How to create an HTML button that acts like a link?

但我不确定所有浏览器的行为。

Answer 3

＆＃13;

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
.button:focus{ outline: 1px solid red; }
.button:hover{ outline: 1px solid red; }

＆＃13;

<!--<a href="http://google.com" class="padded-button" tabindex="-1">
    <div tabindex="2" class="button" focus="true">button</div>
</a>-->
<form method="post" action="http://google.com">
    <button class="button" type="submit">button</button>
</form>

＆＃13;

Answer 4

是的，这是可能的。下面的代码显示，如果您单击或聚焦div，它将重定向到父链接。你可以通过改变它CSS来使div看起来像一个按钮。您还可以通过增加height和width CSS attribute来增加聚焦或点击区域。

#btn
{
  width:100px;
    height:100px;
  background-color: red;
  }

<a href="https://www.google.co.in">
  <div id="btn">click me
    </div>
  </a>

请确保您在父a tag内没有任何其他按钮或链接。在div中将a tag包裹在HTML 4.01内也不是一个好习惯。希望这会有所帮助。

使div可聚焦并在选择

4 个答案: