Impact on adjacent div

Question

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below:

<div class="btn_lists">
    <div class="btn green_btn">
        <img src="<?= asset_url() ?>images/escolar_07__1.png" />
    </div>
</div>
<div class="btn-desc-container">
    <div class="btn-desc_1">
        <p>Description</p>
    </div>
</div>

The initial status of btn-desc_1 is set to display: none; However, my goal is to have the display change to inline-block when hovering over green_btn.

Is there an efficient way to achieve this?

html css

Answer 1

Answer №1

It is impossible to accomplish this using CSS alone. You can utilize the following jQuery code snippet:

$('.green_btn').hover(function(){
    $('.btn-desc_1').toggleClass('display-inline');
})

Check out the example here: http://example.com/jsfiddle-demo

Answer 2

It is impossible to accomplish this using CSS alone. You can utilize the following jQuery code snippet:

$('.green_btn').hover(function(){
    $('.btn-desc_1').toggleClass('display-inline');
})

Check out the example here: http://example.com/jsfiddle-demo

Answer 3

Answer №2

A unique and slightly eerie response. May not be the most trustworthy source of information, as it is purely for illustrative purposes. Avoid using this method in a practical setting. Instead of hovering, interaction is achieved by clicking on images:

The use of :checked is limited to IE9+: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

To see a live example, click on the images of kittens: http://jsfiddle.net/bzH7S/2/

<body>
    <input type="radio" name="btn" value="1" id="radio1">
    <input type="radio" name="btn" value="2" id="radio2">
    <div id="wrap">
        <div class="btn_lists">
            <label for="radio1" class="btn btn1"><img src="1"></label>
            <label for="radio2" class="btn btn2"><img src="2"></label>
        </div>
        <div class="btn-desc-container">
            <div class="btn-desc_1"><p>Kitten One</p></div>
            <div class="btn-desc_2"><p>Kitten Second</p></div>
        </div>
    </div>
</body>

CSS:

body > input {
     display: none;
}

.btn-desc-container > div {
    display: none;
}

#radio1:checked ~ #wrap .btn-desc_1,
#radio2:checked ~ #wrap .btn-desc_2 {
    display: block;
}

Answer 4

A unique and slightly eerie response. May not be the most trustworthy source of information, as it is purely for illustrative purposes. Avoid using this method in a practical setting. Instead of hovering, interaction is achieved by clicking on images:

The use of :checked is limited to IE9+: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

To see a live example, click on the images of kittens: http://jsfiddle.net/bzH7S/2/

<body>
    <input type="radio" name="btn" value="1" id="radio1">
    <input type="radio" name="btn" value="2" id="radio2">
    <div id="wrap">
        <div class="btn_lists">
            <label for="radio1" class="btn btn1"><img src="1"></label>
            <label for="radio2" class="btn btn2"><img src="2"></label>
        </div>
        <div class="btn-desc-container">
            <div class="btn-desc_1"><p>Kitten One</p></div>
            <div class="btn-desc_2"><p>Kitten Second</p></div>
        </div>
    </div>
</body>

CSS:

body > input {
     display: none;
}

.btn-desc-container > div {
    display: none;
}

#radio1:checked ~ #wrap .btn-desc_1,
#radio2:checked ~ #wrap .btn-desc_2 {
    display: block;
}

Answer 5

Answer №3

There is no solution for achieving this unless btn_desc1 is a descendant of green_btn. In that case, the following CSS code would work:

.green_btn:hover > .btn-desc_1
{
    display:inline-block;
}

accompanied by this HTML structure:

<div class="btn_lists">
    <div class="btn green_btn">
        <img width='400px' heigh='400px' src="http://www.pieisgood.org/images/slice.jpg" />
        <div class="btn-desc_1">
        <p>Description</p>
    </div>
</div>

in your CSS file. Alternatively, you can use JQuery to achieve the same effect, as suggested by nidzik:

$('.green_btn').hover(function(){
    $('.btn-desc_1').toggleClass('display-inline');
})

Check out the demo here

Answer 6

There is no solution for achieving this unless btn_desc1 is a descendant of green_btn. In that case, the following CSS code would work:

.green_btn:hover > .btn-desc_1
{
    display:inline-block;
}

accompanied by this HTML structure:

<div class="btn_lists">
    <div class="btn green_btn">
        <img width='400px' heigh='400px' src="http://www.pieisgood.org/images/slice.jpg" />
        <div class="btn-desc_1">
        <p>Description</p>
    </div>
</div>

in your CSS file. Alternatively, you can use JQuery to achieve the same effect, as suggested by nidzik:

$('.green_btn').hover(function(){
    $('.btn-desc_1').toggleClass('display-inline');
})

Check out the demo here

Impact on adjacent div

Answer №1

Answer №2

Answer №3

Similar questions

Switching images with Jquery

CSS must be applied to various sections of an HTML document

Using relative positioning in CSS causes the div to move to a new line

IE9 does not properly display SVGs used as background images

Tips for creating a scrolling animation effect with images

Incorporate AJAX functionality with a simple HTML button

What is the best way to implement CSS styling in the existing Vue.js template?

BeautifulSoup: Retrieve text from HTML lists that are designated exclusively with bullet points

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Changing the Color of Hamburger Menu Lines in Bootstrap

Stop vuetify from cluttering the global style scope

The concept of CSS Parent Elements refers to the relationship

Refreshing HTML tables with AJAX in Django

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Switching between a secondary menu using ClassieJS or jQuery?

Checkbox value not being accurately retrieved by Struts2 page

Display a list of personalized post types and emphasize the item that is currently being viewed

Sliding an image from the left side to the right, and then repeating the movement from left to right

Using AngularJS to automatically fill in HTML select fields

Instructions on transforming a XAML grid in WPF into a JSON array