Question

我有三种不同的红色，蓝色，绿色和黄色。红色包含一个输入框。如果单击红色的输入框（焦点）

，我试图隐藏黄色

HTML

<div class="red">
    <form>
        <input class="s" placeholder="Search">
    </form>
</div>
<div class="blue"> blue </div>
<div class="green"> green </div>
<div class="yellow"> yellow </div>

CSS

.red, .blue, .green, .yellow
{
    padding: 10px;
    border: 1px solid #f00;
}

.red{
    background: red;
}

.blue{
    background: blue;
}

.green{
    background: green;
}

.yellow{
    background: yellow;
}

.s:focus{
    border: 1px solid black;
}

.s:focus + yellow{
    display: none;
}

Fiddle Here

Answer 1

用jquery做这件事很容易;

(function() {
    $('.red input').on({
        click: function() { // maybe you'd prefer on focus?
            $('.yellow').fadeOut();
        }
    })
})();

Answer 2

CSS中的+选择器仅适用于相邻元素。在这种情况下，您想要使用javascript。 JQuery让它变得特别简单：

$('.s').focus(function() {
   $('.yellow').hide(); 
}). blur(function() {
    $('.yellow').show();
});

这是修订后的JSFiddle：http://jsfiddle.net/w10cw8tc/

＆＃13;

$(function(){
    $('.s').focus(function() {
        $('.yellow').hide(); 
    }). blur(function() {
        $('.yellow').show();
    });
});

＆＃13;

.red, .blue, .green, .yellow {
    padding: 10px;
    border: 1px solid #f00;
}
.red{
    background: red;
}
.blue{
    background: blue;
}
.green{
    background: green;
}
.yellow{
    background: yellow;
}
.s:focus{
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
    <input class="s" placeholder="Search" />
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>

＆＃13;

Answer 3

其他答案将有效。如果您愿意，这里有一个小提琴形式。

$(document).ready(function() {
    $(".red input").focus(function() {
        $(".yellow").hide();
    });
});

http://jsfiddle.net/8acwjf3o/1/

Answer 4

您必须为此

使用jQuery .focus()函数

$( "#search" ).focus(function() {
    $( ".yellow" ).hide();
});

请参阅此fiddle

Answer 5

试试这个

＆＃13;

$(function(){

   $(".s").on("focus",function()
   {
        $(".yellow").hide();
   });
   $(".s").on("blur",function()
   {
        $(".yellow").show();
   });

});

＆＃13;

.red, .blue, .green, .yellow
{
    padding: 10px;
    border: 1px solid #f00;
}
.red{
    background: red;
}
.blue{
    background: blue;
}
.green{
    background: green;
}
.yellow{
    background: yellow;
}
.s:focus{
    border: 1px solid black;
}
.s:focus + yellow{
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>

＆＃13;

Answer 6

使用jQuery：

$('#search').on('focus', function () {
    $('#yellow').hide('fast');
});

    .colored {
        padding: 10px;
        border: 1px solid #f00;
    }
    #red {
        background: red;
    }
    #blue {
        background: blue;
    }
    #green {
        background: green;
    }
    #yellow {
        background: yellow;
    }
    .s:focus {
        border: 1px solid black;
    }
    .s:focus + yellow {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colored" id="red">
    <form>
        <input id="search" placeholder="Search" />
    </form>
</div>
<div class="colored" id="blue">blue</div>
<div class="colored" id="green">green</div>
<div class="colored" id="yellow">yellow</div>

Answer 7

在你的CSS中

.s:focus + yellow{
    display: none;
}

这种风格有几个问题，首先是你错过的错误'。'在'黄色'类名之前进行选择。第二;由于'input.s'元素旁边没有'.yellow'元素，因此永远不会应用此样式。在CSS中尚未定义反向子到父选择器（还有！）。

var input = document.querySelectorAll(".s")[0];
input.addEventListener("focus", function () {
    var yellow = document.querySelectorAll(".yellow")[0];
    yellow.style.display = "none";
});

或jQuery方式：

$(".s").focus(function () {
    $(".yellow").hide();//You can use .hide() or .fadeOut() or .slideUp() or .slideDown() methods.
});

如何用jquery或css定位另一个div

7 个答案: