选择文本框时如何更改 css 属性或 div

Question

我已经尝试了一段时间，想弄清楚如何更改使用 php 函数调用的登录面板的不透明度。在 css 中，我在 css

中尝试过

.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:hover
{
    opacity: initial;
    transition: 0.3s;
}
.container input[type="text"]:focus .container
{
    opacity: initial;
    transition: 0.3s;
}

当输入被聚焦时改变.container元素的不透明度但它不起作用有什么办法可以解决这个问题顺便说一句，输入的形式是这样的

<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>

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>

我不确定这是否是你想要的，但你在这里。

选择文本框时如何更改 css 属性或 div

how to change a css property of div when a text box is selected

html

css

php

forum

login

选择文本框时如何更改 css 属性 或 div

how to change a css property of div when a text box is selected

html

css

php

forum

login

选择文本框时如何更改 css 属性或 div