html - Javascript, change a link color when mouse is over it, only after I click a button - Stack Overflow

admin管理员组

文章数量:1402241

I have an assignment to do (so there is rules regarding css use and jquery etc).

edit: I need to do it entirely through javascript, I can't use css or jquery, sorry for not being more specific (although i'm sure the css and jquery answers will be useful to others!

Basically when I click a button I want my javascript to bee active.

one of the features I want is that when my mouse is over a link it changes colour, and when it is no longer on the link it it goes back to the prior colour. I know how I would generally do this with "onmouseover""onmouseout". but I don't know how to do this so it only happens after I click a button

function linkA()
{
    setInterval(changeImage, 3000);
    changeLink();
}

this is some of the code that activates when the button is pressed it then activates the function change link

function changeLink()
{
    var x = document.getElementById('sidebar').getElementsByTagName('a');
    for(var i = 0; i<x.length; i++)
    {
         x[i].style.color = "blue";
    }
}

this is to change the link colours to blue, then i was thinking of using something like

`x.onmouseover = x.style.color="green";
 x.onmouseout = x.style.color='blue';`

to change the colour when i have the mouse over it, but I'm not even sure if that is valid code or if could work, any help is much appreciated!

This is the piece of html i wish to edit, there is more than three links on the rest of the page outside the div tag i just want to alter these three however

<div id="sidebar">
                <div>
                    <h3>Recent Articles</h3>
                    <ul>
                        <li>
                            <a href="article.html">Why the bird is a natural replacement for the bee</a>
                        </li>
                        <li>
                            <a href="article.html">stone work in your garden, the new trend</a>
                        </li>
                        <li>
                            <a href="article.html">Urban family turns garden into eco farm</a>
                        </li>
                        <li>
                            <a href="article.html">sheep as your lawn mower! revolutionary eco gardening</a>
                        </li>
                    </ul>
                </div>

I have an assignment to do (so there is rules regarding css use and jquery etc).

edit: I need to do it entirely through javascript, I can't use css or jquery, sorry for not being more specific (although i'm sure the css and jquery answers will be useful to others!

Basically when I click a button I want my javascript to bee active.

one of the features I want is that when my mouse is over a link it changes colour, and when it is no longer on the link it it goes back to the prior colour. I know how I would generally do this with "onmouseover""onmouseout". but I don't know how to do this so it only happens after I click a button

function linkA()
{
    setInterval(changeImage, 3000);
    changeLink();
}

this is some of the code that activates when the button is pressed it then activates the function change link

function changeLink()
{
    var x = document.getElementById('sidebar').getElementsByTagName('a');
    for(var i = 0; i<x.length; i++)
    {
         x[i].style.color = "blue";
    }
}

this is to change the link colours to blue, then i was thinking of using something like

`x.onmouseover = x.style.color="green";
 x.onmouseout = x.style.color='blue';`

to change the colour when i have the mouse over it, but I'm not even sure if that is valid code or if could work, any help is much appreciated!

This is the piece of html i wish to edit, there is more than three links on the rest of the page outside the div tag i just want to alter these three however

<div id="sidebar">
                <div>
                    <h3>Recent Articles</h3>
                    <ul>
                        <li>
                            <a href="article.html">Why the bird is a natural replacement for the bee</a>
                        </li>
                        <li>
                            <a href="article.html">stone work in your garden, the new trend</a>
                        </li>
                        <li>
                            <a href="article.html">Urban family turns garden into eco farm</a>
                        </li>
                        <li>
                            <a href="article.html">sheep as your lawn mower! revolutionary eco gardening</a>
                        </li>
                    </ul>
                </div>

• javascript
• html

Share Improve this question Follow edited Nov 29, 2015 at 21:27 Kevin asked Nov 29, 2015 at 20:23 KevinKevin 2,41411 gold badge3636 silver badges4444 bronze badges 3

• 1 You could use the button to give the links a new class. And then have a new CSS rule for hovering over links with that class. – Jay Commented Nov 29, 2015 at 20:26
• @Jay that's the way to go, write that as an answer with an example, I'll vote for it. – Stephen P Commented Nov 29, 2015 at 20:29
• @StephenP Thankyou, and I have done. May be late to the party though, think there are some other valid answers already! – Jay Commented Nov 29, 2015 at 20:55

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

If I understand correctly, you want the link only to change colors AFTER you press a button. To do this, you could use a boolean. Something like

var clicked = false;
var onButtonClick = function() { clicked = !clicked; }
x.onmouseover = function () {
    x.style.color = clicked ? 'green' : 'blue'
}
x.onmouseout = function () {
    x.style.color = 'blue'
}

Depending on the full problem.. You could use the button to give a new class to either, the specific / all anchors on the page OR a parent element of some kind. Then use a specific CSS selector to change the color of the links with that class.

Fiddle Here

HTML:

<button id="someButton">Text</button>

<div id="someDiv">
    <a href="#">Link</a>
    <a href="#">Link</a> 
</div>

CSS:

a:hover {
    color: green;
}

#someDiv.newClass a:hover {
    color: red;
}

jQuery:

$( document ).ready( function() {
    $( '#someButton' ).click( function() {

        if( $( '#someDiv' ).hasClass( 'newClass' ) ) {

            $( '#someDiv' ).removeClass( 'newClass' );
        }
        else {

            $( '#someDiv' ).addClass( 'newClass' );
        }
    });
});

Try x.onmouseup() . It strictly checks to see if the mouse button is lifted over an object.

You are almost correct. You need to use:

x.onmousedown = function () {
  x.style.color="green";
}
x.onmouseup = function () {
  x.style.color='blue';
}

Test it here:

var x = document.getElementById("x");

x.onmousedown = function () {
  x.style.color="green";
}
x.onmouseup = function () {
  x.style.color='blue';
}

<strong id="x">Click on me to change colour!</strong>

"Basically when I click a button I want my javascript to bee active."

You can use an event listener to attach other event listeners.

HTML:

<h3>Recent Articles</h3>
  <ul>
    <li><a href="article1.html">Article 1</a></li>
    <li><a href="article2.html">Article 2</a></li>
    <li><a href="article3.html">Article 3</a></li>
  </ul>

<button id="activate">Click here to attach some event listeners.</button>     

JavaScript:

var links = document.getElementsByTagName('a'); 

var activator = document.getElementById('activate');

// Apply the hover effects...
function attachColorChangers(x) {
  x.addEventListener('mouseover', function(){
    x.style.color = 'green';
  });
  x.addEventListener('mouseout', function(){
    x.style.color = 'blue';
  });
} 

// ... after the button is clicked.
activator.addEventListener('click', function() {
  for (var i = 0; i < links.length; i += 1) {
    attachColorChangers(links[i]);
  }
});

本文标签：