Home/ Questions/Q 8912135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:07:26+00:00

I have the following code: <!DOCTYPE HTML> <html> <head> <title>What</title> <style type=text/css> #box1 {

  • 0

I have the following code:

<!DOCTYPE HTML>
<html>
<head>
<title>What</title>
<style type="text/css">
#box1
    {
    position: relative;
    width: 300px;
    border: 1px solid black;
    box-shadow:  -3px 8px 34px  #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 100px; top:  50px;
    height:  150px;


}
    #box1:hover {

    }

@-webkit-keyframes myfirst
{
0%   { right:100px; top:50px;background: yellow;}

50%  {background:blue; right:700px; top:50px;}

100% { right:100px; top:50px; background: yellow}

}
    #stam {font-size: large;
           background: green;
           width: 100px;
           top: 400px;
           position: absolute;
    }
    #stam:hover { -webkit-animation:myfirst 5s;


    }
</style>
</head>
<body dir="rtl">

<div id="box1"></div>
  <div id="stam">1234567</div>
</body>
</html>

my qustion is:
How can I do (without JS is better) that whan I put the mouse on “stam” div – the “box1” div will move (will do the animation in the code)?
I added my code (which isn’t work).
Wish for help. Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If your #stam is going to be after your #box1 you can use the ~ selector – DEMO

    #box1:hover ~ #stam { -webkit-animation:myfirst 5s; }​
    • 0