I aim to create multiple mouseover functions using the least amount of code possible

Question

I aim to create multiple mouseover functions using the least amount of code possible

I have a challenge where I need 10 unique links that behave in a specific way when the user hovers over them. Essentially, I want the background image of the containing div to change and for a tooltip text to fade-in on top of each link.

I've attempted to achieve this functionality using JavaScript, but it's resulted in lengthy and repetitive code. I'm looking for a more efficient solution that avoids unnecessary repetition.

 // JS functions for mouseover and mouseout behavior
document.getElementById("d1").onmouseover = function() {
  mouseOver(1);
};
document.getElementById("d2").onmouseover = function() {
  mouseOver(2);
};
document.getElementById("d3").onmouseover = function() {
  mouseOver(3);
};
document.getElementById("d1").onmouseout = function() {
  mouseOut(1);
};
document.getElementById("d2").onmouseout = function() {
  mouseOut(2);
};
document.getElementById("d3").onmouseout = function() {
  mouseOut(3);
};

function mouseOver(num) { // Function to handle hover behaviors based on link number
  document.getElementById("dogs").style.background = getColor(num); // Get color based on link number
  document.getElementById("tooltiptext" + num).style.visibility = "visible";
}

function mouseOut(num) { // Function to handle mouseout behaviors based on link number
  document.getElementById("dogs").style.background = "black";
  document.getElementById("tooltiptext" + num).style.visibility = "hidden";
}

#dogs {
  float: right;
  margin-top: 5%;
  background: black;
  width: 150px;
  height: 150px;
}

#d-list {
  color: white;
  direction: ltr;
  float: right;
  width: 60%;
  height: 60%;
}

#tooltiptext1,
#tooltiptext2,
#tooltiptext3 {
  color: black;
  background-color: gray;
  width: 120px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  padding-top: 5px;
  visibility: hidden;
}

<div id="animals">
  <div id="dogs"></div>
  <div id="d-list">
    <pre style="font-size:22px; color:darkorange">dogs</pre><br />

    <pre><a href="#burger" id="d1">white Husky</a></pre>
    <p id="tooltiptext1">Tooltip text1</p>

    <pre><a href="#burger" id="d2">black Bull</a></pre>
    <p id="tooltiptext2">Tooltip text2</p>

    <pre><a href="#burger" id="d3">brown Rex</a></pre>
    <p id="tooltiptext3">Tooltip text3</p>
  </div>
</div>

Please consider that all links will update the same outer container div, with the intention of changing its background image and displaying tooltips above the links. So, do you have any suggestions for achieving this efficiently?

javascript jquery html css

Answer 1

Answer №1

update: included the requested animation effect. When dealing with CSS, it is often better to handle it through classes in scripts, especially when multiple elements require similar function manipulation. In this case, I utilized data attributes for colors instead of implementing complex logic, allowing the functionality to extend seamlessly to any new elements that may be added.

I must admit that I found your choice of markup somewhat unconventional, and I would have personally structured it differently. However, since that was not part of the original question, I did not delve into it further.

To streamline maintenance and organization, I transferred the `style` attribute from your `dogs` element to the CSS file. This consolidation ensures that all styles are contained within one location rather than scattering them across markup and CSS, facilitating future modifications.

Given your inclusion of the jQuery tag, here is a sample script:

$(function() {
  $('#d-list').on('mouseenter', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorin'));
    $(this).parent().next('.tooltip').animate({
      opacity: 1
    });
  }).on('mouseleave', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorout'));
    $(this).parent().next('.tooltip').animate({
      opacity: 0
    });
  });
});

#dogs {
  float: right;
  margin-top: 5%;
  background: black;
  width: 150px;
  height: 150px;
}

#d-list {
  color: white;
  direction: ltr;
  float: right;
  width: 60%;
  height: 60%;
}
/* Additional CSS properties */

.tooltip {
  color: black;
  background-color: gray;
  width: 120px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  padding-top: 5px;
  opacity: 0;
  position:relative;
  top:-4.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="animals">
  <div id="dogs"></div>
  <div id="d-list">
    <pre class="dog-header">dogs</pre>
    <pre><a href="#burger" id="d1" data-colorin="blue" data-colorout="black">white Husky</a></pre>
    <p id="tooltiptext1" class="tooltip">Tooltip text1</p>
    <pre><a href="#burger" id="d2" data-colorin="green" data-colorout="black">black Bull</a></pre>
    <p id="tooltiptext2" class="tooltip">Tooltip text2</p>
    <pre><a href="#burger" id="d3" data-colorin="red" data-colorout="black">brown Rex</a></pre>
    <p id="tooltiptext3" class="tooltip">Tooltip text3</p>
  </div>
</div>

Answer 2

update: included the requested animation effect. When dealing with CSS, it is often better to handle it through classes in scripts, especially when multiple elements require similar function manipulation. In this case, I utilized data attributes for colors instead of implementing complex logic, allowing the functionality to extend seamlessly to any new elements that may be added.

I must admit that I found your choice of markup somewhat unconventional, and I would have personally structured it differently. However, since that was not part of the original question, I did not delve into it further.

To streamline maintenance and organization, I transferred the `style` attribute from your `dogs` element to the CSS file. This consolidation ensures that all styles are contained within one location rather than scattering them across markup and CSS, facilitating future modifications.

Given your inclusion of the jQuery tag, here is a sample script:

$(function() {
  $('#d-list').on('mouseenter', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorin'));
    $(this).parent().next('.tooltip').animate({
      opacity: 1
    });
  }).on('mouseleave', 'a', function(event) {
    $('#dogs').css('backgroundColor', $(this).data('colorout'));
    $(this).parent().next('.tooltip').animate({
      opacity: 0
    });
  });
});

#dogs {
  float: right;
  margin-top: 5%;
  background: black;
  width: 150px;
  height: 150px;
}

#d-list {
  color: white;
  direction: ltr;
  float: right;
  width: 60%;
  height: 60%;
}
/* Additional CSS properties */

.tooltip {
  color: black;
  background-color: gray;
  width: 120px;
  height: 30px;
  border-radius: 6px;
  text-align: center;
  padding-top: 5px;
  opacity: 0;
  position:relative;
  top:-4.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="animals">
  <div id="dogs"></div>
  <div id="d-list">
    <pre class="dog-header">dogs</pre>
    <pre><a href="#burger" id="d1" data-colorin="blue" data-colorout="black">white Husky</a></pre>
    <p id="tooltiptext1" class="tooltip">Tooltip text1</p>
    <pre><a href="#burger" id="d2" data-colorin="green" data-colorout="black">black Bull</a></pre>
    <p id="tooltiptext2" class="tooltip">Tooltip text2</p>
    <pre><a href="#burger" id="d3" data-colorin="red" data-colorout="black">brown Rex</a></pre>
    <p id="tooltiptext3" class="tooltip">Tooltip text3</p>
  </div>
</div>

Answer 3

Answer №2

Updated

This response was crafted prior to the question being revised to reflect the desired markup and style, as well as before all details were provided. The code has been adjusted accordingly to align with that structure.

In my opinion, a straightforward approach would be to create a configuration object outlining the variable elements, and then utilize common code for the remainder. Here's a suggested implementation:

const configurations = [
  ['d1', 'tooltiptext1', 'blue'], 
  ['d2', 'tooltiptext2', 'green'],
  ['d3', 'tooltiptext3', 'red'],
];

configurations.forEach(([id, tt, color]) => {
  const dogs = document.getElementById('dogs');
  const element = document.getElementById(id);
  const tipElement = document.getElementById(tt);
  element.onmouseover = (evt) => {
    dogs.style.background = color
    tipElement.style.visibility = "visible";
  }
  element.onmouseout = (evt) => {
    dogs.style.background = "black";
    tipElement.style.visibility = "hidden";
  }
})

#dogs{float:right;margin-top:5%;background:#000;width:150px;height:150px}#d-list{color:#fff;direction:ltr;float:right;width:60%;height:60%}#tooltiptext1,#tooltiptext2,#tooltiptext3{color:#000;background-color:gray;width:120px;height:30px;border-radius:6px;text-align:center;padding-top:5px;visibility:hidden}

<div id="animals"> <div id="dogs"></div><div id="d-list"> <pre style="font-size:22px; color:darkorange">dogs</pre><br/> <pre><a href="#burger" id="d1">white Husky</a></pre> <p id="tooltiptext1">Tooltip text1</p><pre><a href="#burger" id="d2">black Bull</a></pre> <p id="tooltiptext2">Tooltip text2</p><pre><a href="#burger" id="d3">brown Rex</a></pre> <p id="tooltiptext3">Tooltip text3</p></div></div>

You can easily extend this by adding new rows. If you wish to include more diverse properties, you can simply lengthen the rows. However, if the array grows large with many properties in each row, readability may suffer, and switching to an object format like

{id: 'demo', tt: 'dem', color: 'blue'}

might be preferable, along with adjusting the parameters in the forEach callback accordingly. With just three parameters, a concise array structure appears cleaner.

Previous code snippet based on hypothetical markup.

const configs = [
  ['demo', 'dem', 'blue'], 
  ['dd', 'dem1', 'green']
];

configs.forEach(([id1, id2, color]) => {
  const a = document.getElementById(id1)
  const b = document.getElementById(id2)
  a.onmouseover = (evt) => {
    a.style.background = color
    b.style.visibility = "visible";
  }
  a.onmouseout = (evt) => {
    a.style.background = "black";
    b.style.visibility = "hidden";
  }
})

div {width: 50px; height: 50px; float: left; margin: 10px; background: black; border: 1px solid #666; color: red; padding: 10px; text-align: center}
#dem , #dem1{visibility:hidden;}

<div id="demo">demo</div>
<div id="dem">dem</div>
<div id="dd">dd</div>
<div id="dem1">dem1</div>

Answer 4

Updated

This response was crafted prior to the question being revised to reflect the desired markup and style, as well as before all details were provided. The code has been adjusted accordingly to align with that structure.

In my opinion, a straightforward approach would be to create a configuration object outlining the variable elements, and then utilize common code for the remainder. Here's a suggested implementation:

const configurations = [
  ['d1', 'tooltiptext1', 'blue'], 
  ['d2', 'tooltiptext2', 'green'],
  ['d3', 'tooltiptext3', 'red'],
];

configurations.forEach(([id, tt, color]) => {
  const dogs = document.getElementById('dogs');
  const element = document.getElementById(id);
  const tipElement = document.getElementById(tt);
  element.onmouseover = (evt) => {
    dogs.style.background = color
    tipElement.style.visibility = "visible";
  }
  element.onmouseout = (evt) => {
    dogs.style.background = "black";
    tipElement.style.visibility = "hidden";
  }
})

#dogs{float:right;margin-top:5%;background:#000;width:150px;height:150px}#d-list{color:#fff;direction:ltr;float:right;width:60%;height:60%}#tooltiptext1,#tooltiptext2,#tooltiptext3{color:#000;background-color:gray;width:120px;height:30px;border-radius:6px;text-align:center;padding-top:5px;visibility:hidden}

<div id="animals"> <div id="dogs"></div><div id="d-list"> <pre style="font-size:22px; color:darkorange">dogs</pre><br/> <pre><a href="#burger" id="d1">white Husky</a></pre> <p id="tooltiptext1">Tooltip text1</p><pre><a href="#burger" id="d2">black Bull</a></pre> <p id="tooltiptext2">Tooltip text2</p><pre><a href="#burger" id="d3">brown Rex</a></pre> <p id="tooltiptext3">Tooltip text3</p></div></div>

You can easily extend this by adding new rows. If you wish to include more diverse properties, you can simply lengthen the rows. However, if the array grows large with many properties in each row, readability may suffer, and switching to an object format like

{id: 'demo', tt: 'dem', color: 'blue'}

might be preferable, along with adjusting the parameters in the forEach callback accordingly. With just three parameters, a concise array structure appears cleaner.

Previous code snippet based on hypothetical markup.

const configs = [
  ['demo', 'dem', 'blue'], 
  ['dd', 'dem1', 'green']
];

configs.forEach(([id1, id2, color]) => {
  const a = document.getElementById(id1)
  const b = document.getElementById(id2)
  a.onmouseover = (evt) => {
    a.style.background = color
    b.style.visibility = "visible";
  }
  a.onmouseout = (evt) => {
    a.style.background = "black";
    b.style.visibility = "hidden";
  }
})

div {width: 50px; height: 50px; float: left; margin: 10px; background: black; border: 1px solid #666; color: red; padding: 10px; text-align: center}
#dem , #dem1{visibility:hidden;}

<div id="demo">demo</div>
<div id="dem">dem</div>
<div id="dd">dd</div>
<div id="dem1">dem1</div>

Answer 5

Answer №3

my unique approach without any reliance on JavaScript:

div[data-info] {
  display: inline-block;
  margin:80px 20px 0 0;
  border:1px solid red;
  padding: 10px 20px;
  position: relative;
}
div[data-bg=blue]:hover {
  background-color: blue;
  color: red;
}
div[data-bg=green]:hover {
  background-color: green;
  color: red;
}
div[data-info]:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 46px;
  color: #fff;
  content: attr(data-info);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  min-width: 120px;
  max-width: 220px;
}
div[data-info]:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0px 6px;
  bottom: 40px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<div data-info="Unique Tooltip for A Unique Tooltip for A" data-bg="blue">with Unique Tooltip CSS3 A</div>
<div data-info="Unique Tooltip for B" data-bg="green" >with Unique Tooltip CSS3 B</div>

Answer 6

my unique approach without any reliance on JavaScript:

div[data-info] {
  display: inline-block;
  margin:80px 20px 0 0;
  border:1px solid red;
  padding: 10px 20px;
  position: relative;
}
div[data-bg=blue]:hover {
  background-color: blue;
  color: red;
}
div[data-bg=green]:hover {
  background-color: green;
  color: red;
}
div[data-info]:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 46px;
  color: #fff;
  content: attr(data-info);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  min-width: 120px;
  max-width: 220px;
}
div[data-info]:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0px 6px;
  bottom: 40px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<div data-info="Unique Tooltip for A Unique Tooltip for A" data-bg="blue">with Unique Tooltip CSS3 A</div>
<div data-info="Unique Tooltip for B" data-bg="green" >with Unique Tooltip CSS3 B</div>

I aim to create multiple mouseover functions using the least amount of code possible

Answer №1

Answer №2

Updated

Previous code snippet based on hypothetical markup.

Answer №3

Similar questions

Creating a Login Form with Node.js and MongoDB

I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

Fill in the Phone Number field with the area code corresponding to the chosen country

Troubleshooting: Angular 13 input radio not recognizing checked condition

downsides of scrolling text functionality

What could be preventing my bootstrap class from being applied as expected?

Removing error messages upon form reset initiated by an API request

"Utilizing react.js allows for the direct access of DOM elements by the main parent component

The welcome message in Discord.js is displaying the user as a string of numbers instead of their real username

What are the steps to show that a bootstrap responsive table is able to scroll on an iOS device?

Struggling to upload a file within a Jquery Dialog using AJAX. Any suggestions would be greatly appreciated

I tried to import Bootstrap into my project, but it seems to be malfunctioning

What could be causing my divs to overlap one another?

Retrieving JSON information from a PHP script with AJAX

Adjusting the desktop view through media queries for mobile devices

Is it possible to assign a specific value to a row within a table?

Can we create a dynamic Context Menu?

What is the best way to change the content in a textarea field?

begin post loading resource three.js

identifying unused class names within an HTML codebase