CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raul
Raul

Reputation: 77

Styling two divs on hover

Hi I am new to front end so please forgive me if this is a naive question.

I am trying to implement a simple shadow effect on div if user hover's first one the second dive should also have shadow effect

Scenario: image1|text1 image2|text2 image3|text3 If user hovers image1, I should get boreder over image and text1 same for image2 and image 3 link to codepen: http://codepen.io/rahulv/pen/xOZVzr

I have tried two things tried keeping image2|text2 in single dive but didnt work And want it responsive

Css:

 .trio img {
    padding: 1px;
  max-width: 250px;
  width: 100%;
    height: auto;
  text-align:center;
  float:left;
}

Rephrasing question:

   <div class="trio">
        <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
            <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"/>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
            </p>
            </a>
        </div>
 </div>

If I hover on trio border should come on class trio

Upvotes: 1

Views: 66

Answers (2)

monikapatelIT
monikapatelIT

Reputation: 1007

use jquery or javascript for smarter way. i know you new with front end so just made simple changes

   <div class="row">
    <div class="trio">
        <div id="gold_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
        </div>
        <div id="silver_trio" class="div_trio">
             <div class="col-lg-4 col-md-4 col-sm-6">
                  <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
              </div>
      </div>

        <div id="user_trio"  class="div_trio">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <a href="index.php?rt=product/category&path=68" ><img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400"  title="GOLD"></a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  </p>
            </div>
      </div>
    </div>
</div>

just use this bit of code for css

 .trio img {
padding: 1px;
max-width: 250px;
width: 100%;
height: auto;
text-align:center;
float:left;

}

and rest done by jquery 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".div_trio").hover(function () {
            $(this).css("box-shadow", "0 0 10px black");
        }, function () {
            $(this).css("box-shadow", "none");
        });
    });
</script>

Upvotes: 0

Prince Sodhi
Prince Sodhi

Reputation: 2955

I have mentioned before comment there was also problem in HTMl structure. so I have fixed that as well. a tag was starting and closing at wrong position

but now its fixed

have fun.

UPDATED

HTML

    <div class="trio">
              <a href="index.php?rt=product/category&path=68">
                <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
               <img src="http://s3.hulkshare.com/avatar_images/original/a/4/5/a45d67ab944b162b11d39075321357bd.jpg?dd=1388552400" title="GOLD" />
            </div>
            <div class="col-lg-2 col-md-2 col-sm-3 gold_trio">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
              </p>
            </div>
          </a>
        </div>

CSS

  .trio img {
    padding: 1px;
    text-align: center;
    float: left;
  }

  .trio {
    overflow: hidden;
  }

  .trio:hover {
    border: solid 1px red;
  }

Upvotes: 1

Related Questions