Question

我试图在button：focus时获取一个按钮来更改容器的不透明度，但它似乎不起作用。

这是按钮的示例：

  <button type="button" class="bpi" id="bpi1">1519</button>

这是容器的示例：

<div class="infospi" id="ipi1"> lorem ipsum </div>

这是不起作用的CSS：

    .infospi{
  width:400px;
  height:300px;
  background: #ff63b5;
  border-radius: 3px;
  position: absolute;
  top:150px;
  color:white;
  padding: 20px 20px;
  text-align: justify;
  opacity: 0;
  transition: 0.5s ease;
}

#bpi1:focus #ipi1{
  opacity: 0.8;
  }

Answer 1

您的CSS使用decendant selector。它必须是一个子元素。

后代选择器

后代选择器匹配作为指定元素后代的所有元素。

.infospi {
  width: 400px;
  height: 300px;
  background: #ff63b5;
  border-radius: 3px;
  position: absolute;
  top: 150px;
  color: white;
  padding: 20px 20px;
  text-align: justify;
  opacity: 0;
  transition: 0.5s ease;
}

#bpi1:focus #ipi1 {
  opacity: 0.8;
}

<button type="button" class="bpi" id="bpi1">1519 
 <div class="infospi" id="ipi1"> lorem ipsum</div>
</button>

Answer 2

根据这些元素的位置确定您是否只能使用CSS和JS。例如，如果元素距离很近，则可以使用CSS。

1519 lorem ipsum

.bpi:focus + .infospi {
  opacity:.6;
}

  .infospi{
  width:400px;
  height:300px;
  background: #ff63b5;
  border-radius: 3px;
 /*  position: absolute;
  top:150px; */
  color:white;
  padding: 20px 20px;
  text-align: justify;
  /* opacity: 0; */
  transition: 0.5s ease;
}

<button type="button" class="bpi" id="bpi1">1519</button>
<div class="infospi" id="ipi1"> lorem ipsum</div>

Answer 3

您是说#bpi1是#ipi1的父母。您需要一个sibling selector。所以

#bpi1:focus + #ipi1

Answer 4

您可以使用:focus-within伪元素来实现此目的：

.infospi:focus-within {
  opacity: 0.8;
}

但是，请记住this is not supported by all browsers。

实际上，最安全的方法是使用一些简单的Javascript来实现，例如：

$('.infospi .bpi').focus(function() {
    $this().parent().addClass('focused-child');
})

$('.infospi .bpi').blur(function() {
    $this().parent().removeClass('focused-child');
});

单击按钮时如何更改容器的不透明度？

4 个答案: