php - 选择文本框时如何更改div的css属性

Question

<分区>

Answer 1

https://jsfiddle.net/97py6vgj/23/是我的解决方案。当我在容器上检测到 mousedown 时，我刚刚使用了 jQuery。为了更改 css，我使用了 .css() 方法。然后，我做了一个技巧，你可以检测到元素外部的点击，并使其恢复正常。您可以相应地对其进行编辑。

我将在此处添加代码段。

var stay = 0;
$('input').mousedown(function() {
	$(".container").css("opacity", "initial");
  stay = 1;
});
$(window).mousedown(function () {
    $('.container').css("opacity", "0.6")
    stay = 0;
});
 
$('.container').mousedown(function (event) {
    
    event.stopPropagation();
});
$('.container').mouseenter(function() {
  $(this).css("opacity", "initial");
  $(this).css("transition", "0.3s");
});
$('.container').mouseleave(function() {
  if(stay == 0) {
  $(this).css("opacity", "0.6");
  $(this).css("transition", "0.3s");
  } else {$(this).css("opacity", "initial");}
});

.container
{
    background: #FFF;
    opacity: 0.6;
    width: 320px;
    height: 500px;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 30px 30px;
    transition: 0.3s;
}
.container input[type="text"]:focus .container
{
    opacity: initial;
    transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
            <form action="validatelogin.php" method="POST">
                <p>Username:</p>
                <input type="text" name="usernameinput" id="usernameinput" />
                <p>Password:</p>
                <input type="Password" name="passwordinput" id="passwordinput" />
                <br />
                <div style="margin-top:10px;">
                    <input type="submit" value="Login" />
                    <button type="button" onclick="location.href=\'register.html\';">Register</button>
                </div>
            </form>
        </div>

我不确定这是否是您想要的，但您来了。