I want to make a hover on picture that effect navbar

Question

i'm trying to make a simple website contain navbar and image i know how to make hover over my class nav to effect my navbar

but i tried to make it different ! hover over picture .. will effect my navbar but picture won't be effected !

i tried to add more div classes . changed my code many times with many changes i saw on youtube , etc .. nothing became successful and i'm damn lost

test.image:hover~#list {
  background-color: yellow;
  font-size: 40px;
}

<html>

<body>
  <h1> test1 </h1>
  <div class="test">
    <div class="list">
      <ul>
        <li>test2</li>
      </ul>
    </div>
    <div class="image">
      <img src="test.jpg">
    </div>
  </div>
</body>

</html>

well no effect at all ! and i tried many times with different codes .. doing ids , classes , something about parent and child .. nothing .. also i can't understand parent and child for real xD

based on your above HTML, you will not be able to that with CSS alone.. you are going to need javascript for that.. Add mouseover and mouseout events on your img tag.. in the event handlers you can add the css class to the navbar (with the above css) and remove them as per your requirement... — James Ashok, Aug 07 '19 at 03:16
@AxelAnaya what i need is .. i got bar + image , so when my mouse hover over image .. nothing happen to image .. but bar effected .. — ẬħmȜđ Wāly, Aug 07 '19 at 03:17
@JamesAshok so can you please tell me how can i edit my HTML to make it work with CSS only ? i'm still learning both languages .. don't want to learn new language so i will be confused :D — ẬħmȜđ Wāly, Aug 07 '19 at 03:20
@AxelAnaya yes but not on image itself , the yellow hover will be on navbar only .. — ẬħmȜđ Wāly, Aug 07 '19 at 03:23
if you need with only CSS, then menubar should be a child/descendant of your hover element (mostly your div class="image").... but that is not advisable as it will be difficult to maintain your layout.. I would suggest you use javascript.. — James Ashok, Aug 07 '19 at 03:23
@AxelAnaya, mouse hover image - navbar style should change.. is there any way this could be done only in CSS for the above html layout? — James Ashok, Aug 07 '19 at 03:25

score 0 · Accepted Answer · answered Aug 07 '19 at 03:35

0

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .hover-style {
                // your CSS for hover
            }
        </style>
        <script>
            function addCssClass() {
                document.getElementById('navbar').classList.add('hover-style');
            }
            function removeCssClass() {
                document.getElementById('navbar').classList.remove('hover-style');
            }
        </script>
    </head>
    <body>
        <h1> test1 </h1>
        <div class="test">
            <div class="list" id="navbar">
                <ul>
                    <li>test2</li>
                </ul>
            </div>
            <div class="image">
                <img src="test.jpg" onmouseover='addCssClass()' onmouseout='removeCssClass()'>
            </div>  
        </div>
    </body>
</html>

The above is the logic, that I am trying to convey.. On mouseover of image add a css class to your navbar, on mouse out remove the css class from your navbar...

answered Aug 07 '19 at 03:35

James Ashok

111
5

1

well james , working like charm .. thanks for the idea btw .. i think js is better than doing this in css only .. anyway i will try to convert and play with css a little .. if i didn't succeed i will move on js xD <3 – ẬħmȜđ Wāly Aug 07 '19 at 03:50
@ẬħmȜđWāly, good that it works... as you are new to html, css, let me just add one point to remember (always).. Any website/web application will have to use HTML, CSS and JS for a nice user experience.. you cannot avoid one or the other.. Main thing to remember is (1) Keep only content in HTML, (2) Keep only styles in CSS, (3) Move all behaviors/interactions/logic to javascript... This will help you avoid lots of complexities in the future with web apps development.... – James Ashok Aug 07 '19 at 04:11
@JamesAshok “keep only content in HTML” - but you’ve included inline event listeners in your answer. – Claire Aug 07 '19 at 04:18
@Claire, the above code is just output oriented, just to give an idea how js can accomplish something, but for production purpose or real apps, better to maintain, content in HTML, styles in CSS, logic in js – James Ashok Aug 07 '19 at 04:23

I want to make a hover on picture that effect navbar

1 Answers1