Наведите курсор на DIV, чтобы увеличить ширину

Question

Это то, что у меня есть на данный момент - https://jsfiddle.net/8216Lntb/

body {
  background-color: black;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
.grow {
  height: 100vw;
  /* Origional height */
  width: 25%;
  /* Origional width */
  margin: 0px 0 0px 0;
  /* Just for presentation (Not required) */
  float: left;
  /* Just for presentation (Not required) */
  position: relative;
  /* Just for presentation (Not required) */
  transition: height 0.5s;
  /* Animation time */
  -webkit-transition: height 0.5s;
  /* For Safari */
}
.grow:hover {
  width: 25%;
  /* This is the height on hover */
}

<html>

<head>
  <title>HOMEPAGE</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
</head>

<body>
  <div class="grow" style="background-color:#2A75A9;"></div>
  <div class="grow" style="background-color:#274257;"></div>
  <div class="grow" style="background-color:#644436;"></div>
  <div class="grow" style="background-color:#8F6048;"></div>
  <!--<div class="grow" style="background-color:red;"></div>-->
</body>

</html>

Я пытаюсь достичь этого https://artsandculture.withgoogle.com/en-us/ национальные-парки-сервис / парки

Каждый раз, когда я наводил курсор на div, он удалял его со страницы, потому что он превысил 100%.

Мой вопрос в том, как мне это сделать, чтобы, когда один div расширяется, другие просто становятся меньше, поэтому все они остаются на одной странице

jquery html css

18

himynameis 6 Сен 2016 в 14:51

Answer 1

Я думаю, что для этого вам не нужен javascript .

html,body{
	margin: 0 auto;
	height: 100%;
	width: 100%;
}
body {
	background-color: black;
}
#growContainer{
	display: table;
	width:100%;
	height:100%;
}
.grow{
	display: table-cell;
	height:100%;
	width: 25%;
	-webkit-transition:width 500ms;
	-moz-transition:width 500ms;
	transition:width 500ms;
}
#growContainer:hover .grow{
	width:20%;
}
#growContainer:hover .grow:hover {
	width:40%;
}

<div id="growContainer">
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
</div>

36

Vixed 22 Сен 2016 в 20:56

Answer 2

Если вы не против использовать flexbox, возможно, это решение, которое вы ищете.

html, body{
  height: 100%;
  margin: 0;
}
.grow{
  display: flex;
  justify-content: center;
  height: 100%;
  overflow-x: hidden;
}
.grow > div{
  flex-basis: 25%;
  flex-shrink: 0;
  transition: .5s;
}
.grow > div:hover{
  flex-basis: 40%;
}
.grow > div:first-child:hover{
  margin-left: 15%;
}
.grow > div:last-child:hover{
  margin-right: 15%;
}

<div class="grow">
  <div style="background-color:#2A75A9;"></div>
  <div style="background-color:#274257;"></div>
  <div style="background-color:#644436;"></div>
  <div style="background-color:#8F6048;"></div>
</div>

Этот фрагмент кода фактически скрывает левое и правое поля, когда один из двух в середине зависает, как на веб-сайте, который вы показали. Это также только CSS, так что это плюс!

Таким образом, контейнер - это flexbox, его дочерние элементы всегда центрированы, их flex-basis составляет 25%, и они не могут сжиматься (flex-shrink: 0), что означает, что когда один из них растет, они переполнятся.

Затем, когда первый или последний зависают, они получают 15% дополнительной маржи, что позволяет им возвращаться в контейнер.

Надеюсь это поможет

15

Gust van de Wal 24 Сен 2016 в 14:03

Answer 3

Пожалуйста, проверьте этот код. Я использовал jquery для эффекта зависания

$(document).ready(function(){
$('.grow').hover(function() {
    $( this ).addClass( "hover" );
    $('.grow').not(this).removeClass("hover");
  });
 });

body {
    background-color: #8F6048;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 20%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    transition:width 0.5s; /* Animation time */
    -webkit-transition:width 0.5s; /* For Safari */
}
.grow.hover{
    width: 40%; /* This is the height on hover */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="grow hover" style="background-color:#2A75A9;"></div>
        <div class="grow" style="background-color:#274257;"></div>
        <div class="grow" style="background-color:#644436;"></div>
        <div class="grow" style="background-color:#8F6048;"></div>

3

Haresh Vidja 30 Сен 2016 в 04:56

Answer 4

Вы можете легко решить эту проблему, используя toggleClass()

Попробуй это:

$(function() {
    $('div').hover(function() {
        $(this).toggleClass('expand');
        $('div').not(this).toggleClass('shrink');
    });
});

body {
    background-color: black;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 25%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    -transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
}

.expand{
    width: 40%;
}
.shrink{
    width: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>

17

Hitesh Misro 28 Сен 2016 в 03:56

Answer 5

Пожалуйста, проверьте этот код.

Html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate Div Width on Hover in jQuery</title>
</head>
<body>
    <p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
    <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</body>
</html>

CSS:

 .box{
        width: 200px;
        height: 150px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }

Javascript:

 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var boxWidth = $(".box").width();
        $(".box").mouseenter(function(){
            $(this).animate({
                width: "400"
            });
        }).mouseleave(function(){
            $(this).animate({
                width: boxWidth
            });
        });
    });
</script>

1

Dhaval Ajani 27 Сен 2016 в 08:51

Answer 6

Используйте адаптивную сетку, которая должна работать на вас.

0

kaleemullah 29 Сен 2016 в 12:47

Наведите курсор на DIV, чтобы увеличить ширину

6 ответов

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery