Hover Action Failing to Activate

Can someone help me with a simple task? I have a pink box that should turn red when the user hovers over it, but the code doesn't seem to be working. If I can't figure this out, I might lose my job!

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body style="background-color:black";>



<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
    $("rect").(function(i) {
        $("rect").mouseover(function() {
            $("rect").attr({"fill": "red"});
        });
    }); 
});

</script>

</body>
</html>

Answer №1

Have you considered utilizing CSS for this task?

#draw-here-raphael:hover{background-color:Red;}

Alternatively, you could try using the following code:

$(rect).mouseover(function() {
    this.attr({"background-color": "red"});
});

Answer №2

Consider changing the jQuery selector from $("rect") to just rect

rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
    rect.mouseover(function() {
        rect.attr({"fill": "red"});
    });
});

However, it has been noted in a comment that this may not work with SVG.

If you have a rectangle represented by a div with specific height, width, and positioning properties, you can simply change its background color on mouseover using CSS.

For example, if you have a div with id="pinkBox"

$('#pinkBox').mouseover(function() {
    $(this).css('background-color','#ff0000');
});

You will also need to ensure proper positioning of the div element. If Raphael library involves fixed position, you can mimic this behavior using CSS properties like

position:fixed; top: some value; left: some value; width: some value; height: some value

Here is the full code:

HTML:

<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>

Javascript:

$(document).ready(function() {
    $('#pinkBox').mouseover(function() {
        $(this).css('background-color','#ff0000');
    });
});

If you do not utilize CSS3, achieving rounded corners without images may be challenging. However, with CSS3, you can apply rounded corners by including the following styles in your div element:

border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 

For better organization, consider creating a separate CSS file or using a class attribute for styling instead of inline styles.

Answer №3

I made some adjustments, but how about trying something similar to this:

let paper = Raphael(document.getElementById("draw-here-raphael"));

// Creating a pink rectangle
let rect = paper.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");

$("#draw-here-raphael").mouseover(function() {
    rect.attr("fill", "red");
});

http://jsfiddle.net/7PLy9/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with JavaScript: array maximum function malfunctioning

Here is the javascript code I am working with: http://jsfiddle.net/MvWV7/5/ The goal is to have users fill in the inputs starting with 1. Once they type 1, the next value should be 2 (and not any other number). I am attempting to store the input values i ...

"I want to create a new div container that wraps around the existing div when it

Consider this scenario: an existing div with the class <div class="two">TWO</div>. When this div is clicked, a new div called .one should be added, wrapping the .two like so: <div class="one"><div class="two">TWO</div></div ...

Encountering Uncaught Runtime Error in NextJs

Encountered an issue with my Nextjs website development where I am seeing an Unhandled Runtime Error. Error: Server-rendered HTML does not match text content. **Warning:** Discrepancy found between server and client text content: Server says "160 mins ag ...

Centering an Image with CSS

Looking for assistance in centering my code vertically and horizontally, while also dealing with images of various sizes. CSS: body { margin: 0px; } .wrapper { text-align:center; width: 100%; height: 100%; position: relative; z-index: ...

Which is better for generating automatic value - Javascript or Controller?

I am currently exploring the most effective way to update a database value based on the input from a textbox. The database contains two columns: "Amount Added" and "Money". The value in the "Money" column depends on the "Amount Added" value. My goal is to ...

What could be causing the buttons in this JavaScript trivia game to consistently show the wrong answer even after selecting the correct one?

My latest project involves creating a trivia game using vanilla JavaScript and Bootstrap. The game fetches questions from the API, displays the question along with four multiple choice answers on separate buttons using Bootstrap. To ensure the buttons are ...

Angular $watch fails to fire upon modification of $scope variable

At the start of my application, I need to execute a routine using user data that is fetched during initialization. In the controller for the homepage, I check if there is a token stored (indicating a logged-in user) and then proceed to run the routine if ...

Using Angular JS for Traditional Multi-page Websites

Lately, I've been diving into Angular 2 and I have to admit, it's an impressive framework for building single-page applications. But here's the thing - how would one go about integrating Angular with a traditional website (maybe using codei ...

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

Confusion surrounding the purpose of an AngularJS controller function

After experimenting with some basic tutorials in AngularJS, I came across a discrepancy in how controllers are declared and used. For instance, in this JSFiddle link - http://jsfiddle.net/dakra/U3pVM/ - the controller is defined as a function name, which w ...

Tips for sending a JSON array in an Angular 2 post request

Hello, as a newcomer to Angular, I am encountering an issue with my JSON list. Below is the data: {Id: 1, Name: "A", Status: false, CustTrack: false, RoleId: 1} {Id: 2, Name: "B", Status: true, CustTrack: false, RoleId: 1} {Id: 3, Name: "C", Status: true, ...

What is the best way to trigger a function on every navigation event in a React Native application?

Here is my scenario: We are currently working on adding an inactivity timeout feature to a react native app. The goal is to have the timeout reset every time a user interacts with the app or navigates between screens. At the moment, we have a callback fu ...

What about incorporating unique images with custom HTML input tags?

Hand Diagram Hey there! I'm currently working on a small project using Angular. I was wondering if it's feasible to add tags to an image and prompt the user for input when a tag is clicked? For example, in the image above, I'd like to plac ...

Preventing JQuery from interrupting asynchronous initialization

I am currently developing an AngularJS service for a SignalR hub. Below is the factory code for my service: .factory('gameManager', [function () { $.connection.hub.start(); var manager = $.connection.gameManager; return ...

"Present a continuous sequence of images in HTML to create a dynamic video-like experience

A PHP file has been created to extract images from a MySQL database and display them as a sequence of images that update every half second. Using the setInterval method in JavaScript, the page is refreshed every half second to display a new picture. $(doc ...

Ensuring Map Safety in Typescript

Imagine having a Map structure like the one found in file CategoryMap.ts export default new Map<number, SubCategory[]>([ [11, [100, 101]], [12, [102, 103]], ... ]) Is there a way to create a type guard for this Map? import categoryMap fro ...

How to defer the rendering of the router-outlet in Angular 2

I am currently working on an Angular 2 application that consists of various components relying on data fetched from the server using the http-service. This data includes user information and roles. Most of my route components encounter errors within their ...

What could be causing the texture distortion in THREE.js?

I am encountering an issue with the textures loaded using the TextureLoader, as they seem to be causing tearing errors within the texture. Below is the code snippet I am using for the material: var textureName = "Melamine-wood-001"; var textureUrl = ...

Tips on maintaining and storing values for every loop and filling HTML rows correspondingly

Our task is to store the value of each iteration and then load these values into corresponding HTML rows. The server will provide dynamic responses: (based on the key selected by the user) Key:"Apple" values:0:Array[2] 1:"500" 1: Array[2]0:""1:"765" "Key: ...

The image is not aligning properly within the navigation bar

I had some queries in mind: 1) How can I ensure that the circular profile image on the rightmost side fits within the header without overflowing? 2) How do I properly align the last three images at the bottom (in the "R" class), with adequate spacing bet ...