All geek questions in one place

JavaScript - onmouseover change previous css height element

I have two divs whose heights I would like to control relative to each other. The point of these divs is that when the user clicks on one of them, it expands vertically and the other retracts vertically (smoothed using CSS transitions). Basic markup:

<div class="product">
    <h2>Product Name</h2>

    <div class="preview" style="background:url('/images/preview.png'); "></div>
    <div class="detail" style="background:url('/images/design.png'); "></div>

    <div class="product_info">
        <span class="quantity">7 Available</span>
        <span class="price">$19</span>
    </div>
</div>

This is generated several times with unique images and other data pulled from the database, so these images are just placeholders, but that's not a question.

Here's the stripped down CSS:

div.product {
    margin: 4px;
    padding: 4px;
    display: inline-block;
    width: 221px;
    height: 319px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

div.product div.preview, div.product div.detail {
    height: 127px;
    width: 205px;
    margin: auto;
    margin-bottom: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    -moz-transition: 0.25s linear;
    -o-transition: 0.25s linear;
    -webkit-transition: 0.25s linear;
}

div.product div.detail:hover, div.product div.preview:hover {
    height: 254px;
}

div.product h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

div.product span.price {
    color: #B32B2B;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    float: right;
}

div.product span.quantity {
    text-align: left;
    float: left;
}

Now the idea is that when you hover over any image, it expands to fill the space of another image, which is compressed in response. This cannot be done in CSS with this markup, and not with anything I tried.

JavaScript div onmouseover previousSibling CSS. , . - ?

+3
3

, WSkid, , . . JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.nextAll($('div.detail:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.nextAll($('div.detail:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.prevAll($('div.preview:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.prevAll($('div.preview:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
    });
</script>

CSS:

div.preview, div.detail {
    height: 205px;
}

div.expand {
    height: 248px;
}

div.short {
    height: 8px;
}
0

onFocus onBlur, , - .

, JS , JQuery. focus .

+1

javascript, . jQuery jQuery-UI ( ).

- ( ):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
.big {height:250px;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.nextAll($('div.detail:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.prevAll($('div.preview:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
    });
    </script>
    </head>
<body>
<div id="container">
<div class="preview big" style="background-color:red;width:50px;">&nbsp;</div><br>
<div class="detail" style="background-color:blue;width:50px;">&nbsp;</div>
</div>
</body>
</html>

:
jQuery hover, nextAll, prevAll
jQuery-UI addClass, removeClass

:
, , script divs OnHover. - , . jquery DOM div , . div.

add/remove , .

In the part of the part, we do the same, but we go back to find the first div preview.

This works smoothly in Chrome, but on IE7 it is slow - mainly due to the JavaScript javascript mechanism.

+1
source

Source: https://habr.com/ru/post/1769830/

More articles:


All Articles