CSS3 – Transition

Question 1

Question by Wanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

nothing special ! and this is the main.css

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

i think the problem is around here …

.box:hover .ssin{
    width: 500;
}

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer

Answer by Jeremy T

Jeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer

Answer by Starx

Starx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>
</div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

Question 2

Question by Xander Guerin

Xander Guerin

Has anyone else noticed that when you have the CSS:hover effect applied to an element, hide that element and keep the mouse perfectly still, the hover effect is still present until the mouse moves?

I’ve has a search but can’t seem to find any other threads similar. I know it is probably easy but I cannot find the solution and it will cause me to end up in Bedlam.

To see what I mean, take a look at this Fiddle: http://jsfiddle.net/NsMKN/ and

Click the black box to expand it
move the cursor outside the original blackness like where the red X is
click to hide and keep the mouse cursor PERFECTLY still
notice the black box is still red???

When the cursor moves, the :hover is not applied as it should, but it there a way to do this without having to move the mouse and without having to apply the hover effect using jQuery myself (leaving it to CSS)?

Update: I’ve marked Starx as the answer as it does appear to be an IE thing. Thanks for the help guys.

awesome piccy

Answer

Answer by Starx

Starx

Let me split your code.

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

Here, the div .content is inside .tester which wraps itself with respect to the what is inside, on general cases.

.tester:hover
{
   background-color:red; 
}

Your CSS is also applied to the same wrapper div i.e. .tester. So, that when the mouse is over to this part, its background color will change.

$('.tester').click(function () {
    $(this).children('.content').toggle();
});

Now, when you toggle the inner element to make it visible. The dimensions of the .tester will change according to the inner elements. Although it is fixed in your case, DOM also has to consider its children. Try to do the same with this fiddle.

Example Showing the Issue

Due to this reason The the mouse will still be over the div .tester. So, style of .tester:hover will still be applied.

Now, when you the toggle .content, the wrapper div .tester will retain the previous state, until further event occurs.

Browsers like IE, does not seem to update its DOM properties until next event occurs.

Question 3

Question by markzzz

markzzz

Seems that I can’t store the linguettaCorrente variable into the hover handler :

$('.navigatore_blocco').hover(
    var linguettaCorrente=$(this).find('linguetta');

    function() {
        linguettaCorrente.animate( { height: 33 }, 600);
    },

    function() {
        linguettaCorrente.animate( { height: 23 }, 600);
    }
);

why? And how can I store it?

Answer

Answer by Vega

Vega

Declare the same var outside the hover and define it inside.

var linguettaCorrente = null;
$('.navigatore_blocco').hover(
    function() {
        linguettaCorrente = $(this).find('linguetta');
        linguettaCorrente.animate( { height: 33 }, 600);
    },
    function() {
        linguettaCorrente.animate( { height: 23 }, 600);
    }
);

.hover function takes 2 argument and those 2 are functions. It cannot be anything else.

Answer

Answer by Starx

Starx

Why dont you use .data() to store the needed data?

$('.navigatore_blocco').hover(
    var linguettaCorrente=$(this).find('linguetta');
    $(this).data('linguetaaCorrente', linguettaCorrente);
    ....
);

Question 4

Question by Roel

Roel

I am attempting to create a mouse-over effect on a navigation on my website.
The navigation is a horizontal bar with a few items in it. Code for it below;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Our work and portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

This has a plain background color and between every <li> is a border to separate the items. Now I want to give a background image on hover, though my problem is that – as you can see – every <li> has a different width because of its contents and my image for the hover is as below;

hover effect

So it’s actually just a black shadow on the left and right. The right shadow must be placed on the absolute right side of the <li> and the left shadow on the absolute left.

Is there any way to achieve this? Not a problem if it’s with jQuery or anything like that.

Thanks in advance.

Answer

Answer by Starx

Starx

If you want the shadow, and the variable length effect. Then split the image into three parts. And update your markup to something like this

Left Shadow
Center Part
Right Shadow

Then use the following CSS snippet

li a:hover:before { content: url("image/leftshadow.jpg"); }
li a:hover { background-Image: url("image/center.jpg"); }
li a:hover:after { content: url("image/rightshadow.jpg"); }

Question 5

Question by user1099029

user1099029

Here is the link to the jsfiddle: http://jsfiddle.net/d3xMZ/

when I hover, it does exactly what it is suppose to do, which is load the social sharing.
but when I implemented it on my website, nothing happens on hover.
Can anyone help, I have googgled and looked at similar questions on stackoverflow, but no luck

Answer

Answer by Starx

Starx

First, Include the jquery library on your code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Next, Wrap the jquery code inside

$(function() {
  //place the js part here
});

Question 6

Question by Lance Hadley

Lance Hadley

I’ve been banging away at this and can’t seem to fix this. Ultimately I’m trying to make a drop down nav bar using jquery and divs which reveal by hovering. I’ve almost got it down, but thing is when I have two together and they overlap I can’t get the bottom one to fade out.

Are there any suggestions for how to do this.

<!-- Home Tab -->

<div id="m_bar_home">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_home, #m_dddhome").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_dddhome").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_dddhome" >Allo there</div>
  </div>

  <!-- Learn To Sail Tab -->

<div id="m_bar_lts">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_lts, #m_ddd_lts").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_ddd_lts").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_ddd_lts" >Allo there</div>

Here is a demo

I think it has something to do with an if function but I’m not sure.

Any ideas?

Answer

Answer by Starx

Starx

Your coding is very beginner level and very inefficient. I am not trying to offend, but

You are including jQuery twice on same page.
Function call are 100% redundant for both cases. You are writing the same code again and again multiple times.

You should assign a common selector for every div. What if next you have 100 divs, are you going to include 100 jquery files, and same function again and again for each element.

This is how you should do it.

$(".hover").hover(function(){               
    $(this).children(".inner").fadeIn("fast");      
}, function() {    
    $(this).children(".inner").fadeOut("fast");     
});

See demo

I made some changes to the markup as well to add a common class.

Question 7

Question by Ahhhhhhhhhhhhhdfgbv

Ahhhhhhhhhhhhhdfgbv

Okay sorry for the title, wasn’t too sure how to phrase it.

So we have a project going, and we are offering multiple incentives depending on what people donate (similar to Kickstarter if you know what that is).

Anyway, what we have ben trying to figure out is when someone hovers on one price range we want the items they will receive to have full opacity, and then the same for the further down donation values.

Maybe the image will make more sense..

So the blue is the hover, and when you hover over the “$1+”, items 1, 3, 4 are opaque. But when you hover over the “$15+” only items 1, 3 are opaque.

There are around 20 items, and 15 price brackets, all in which are interlinked with one another.

I assume this has to be one in JS, something I know nothing about.

Thank you :]

Edit:
Thank you for all the tips. I have completed the project with the css3 :not

And the fallback will be JS

Answer

Answer by Starx

Starx

I will give a rather simple solution.

Give every boxes classes of price where should be opaque on. Kinda like

<div id="item1" class="p1 p15">Item 1</div>

Then, on your price links use the classname as the id for the specific links

   <a class="price" id="p1">$1+</a>

Then use the

$(".price").mouseover(function() {
           $(".items").css("opacity", 0.4);
           id = $(this).attr('id');
           $("."+id).css("opacity", 1);
});

Demo

Demo 2 Including the styles

Question 8

Question by bryceadams

bryceadams

I have some css sprites on my site in the header but when the page loads it often loads several of the 8 separate images just below where it’s meant to be. Then I wait a few seconds or hover my mouse over them and it goes back to the correct positions.

Here’s my CSS:

.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}

and then the HTML goes like this:

<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div> &nbsp;
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>

for 8 separate 100×100 squares in a row.

Answer

Answer by Starx

Starx

The way to define css sprite is a bit different then how you are doing it.

Here is an example of how this can be achieved.

/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }

/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }

Demo

Question 9

Question by hyperrjas

hyperrjas

I have this css:

.disable {
          properties
          }

.comment_action:hover {
                       properties
                       }

I have this jQuery:

//comment button index disable
$("#mydiv").toggle(function() {
 $(this).find(".comment_action").addClass('disable');   
},
function(){
 $(this).find(".comment_action").removeClass('disable');
});

The problem for me is that when I doing click the .comment_action:hover is not disappear or removed. I want that If I doing click on the class .comment_action:hover dissapear and if I doing click again the .comment_action:hover appear.

Answer

Answer by lawrence.alan

lawrence.alan

You would need an !important added to properties you want to override in the :hover psuedo-selector…

Because :hover takes precedence, even if .disabled is applied.

Also your javascript should be calling find with .comment_action instead of comment_action

See working example: http://jsfiddle.net/TN4rh/11/

Answer

Answer by Starx

Starx

Better solution would be toggle the class. What you are trying to do can be done in one line.

$("#mydiv").click(function() {
    $(this).find(".comment_action").toggleClass('disable');       
});

Demo

🙂

Tag: hover

CSS3 – Transition

Question by Wanny Miarelli

Answer by Jeremy T

Answer by Starx

jQuery hide + CSS hover issue with mouse

Question by Xander Guerin

Answer by Starx

Can I store some variable into the hover function?

Question by markzzz

Answer by Vega

Answer by Starx

CSS On hover dynamically width background image

Question by Roel

Answer by Starx

jquery works on jsfiddle, but not on my website

Question by user1099029

Answer by Starx

Jquery .hover() divs overlapping and wont fade out

Question by Lance Hadley

Answer by Starx

See demo

Highlight multiple items on hover's condition

Question by Ahhhhhhhhhhhhhdfgbv

Answer by Starx

Demo

Demo 2 Including the styles

css sprites – a hover with images not loading correctly

Question by bryceadams

Answer by Starx

Demo

Remove/Add hover after toggle Jquery

Question by hyperrjas

Answer by lawrence.alan

Answer by Starx

Please fill the form - I will response as fast as I can!