CODEWITHSUNDEEP
htmlcsshoverrollover
user2291964
user2291964

Reputation: 49

CSS trouble getting hover state to behave on simple div

Here’s a tricky one…

I have a div, the contents of which should change on hove over on any part of it.

Here’s a pic detailing both wanted states: active state hover state

And here is best effort, so far: codepen ..it needs a bit of work.

Any help much appreciated!

Here's the HTML so far:

    <div class="item green">


     <a href="#">
      <h4>Welcome</h4>

      <p>Click here to find out more</p>
      <img src="http://www.veropixel.com/res01-170w115h.jpg"/>
    </a>
</div> <!-- /item -->

Upvotes: 0

Views: 72

Answers (2)

AlexDom
AlexDom

Reputation: 701

So there's my solution http://codepen.io/anon/pen/mIrvA :

  $resinGreen: #00a14a;

  .green { background: $resinGreen; }

  .item {
        width: 300px;
        margin-bottom: 5px;

        a {
              display: block;
              height: 98px;
              overflow: hidden; /* cancels img float */
              text-decoration: none;

        h4, p {
              height: 98px;
              line-height: 98px; /* Two lines added to center 
              vertically text of course you can use display:inline-block
               with vertical-align:middle */
              padding-left: 15px;
              margin:0;
        }

        img {
              float: right;
              height: 98px;
        }

        p {
              display: none;
        }

        &:hover {
             h4, img { display: none; }
             p { display: block; }
        }
      }

    }

Your problem was that your link haven't a height so it's why it was blinking, i also moved img to the first place for floating

Upvotes: 1

KevInSol
KevInSol

Reputation: 2610

If using just images within the div this bit of jquery will do it:

$('#applyimg').hover(function(){
        $(this).attr('src','/design/sendcv_over.png');
        },function(){
             $(this).attr('src','/design/sendcv.png'); 
        });

HTML

<img id='applyimg' src='/design/sendcv.png'>

Mouseover the image will swop it's source

Upvotes: 0

Related Questions