I'm sure this is really freaking simple, but I must be overlooking some aspect. I have a static image that is displayed on a webpage when it is loaded. I have an unordered list with a few list items. I would like to change the displayed webpage image when the mouse hovers over one/each list item. I tried using the onmouseover HTML event, but could not figure that out and I would like to use CSS anyways so I tried using the :hover CSS selector but I can't seem to figure it out
<div class="responsive_right_side_block"><img class="responsive_image" height="214" src="images/axis.gif" width="145"></div>
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
</ul>
</p>
Here is the CSS block that I currently have
<style>
#frontal:hover .responsive_image {
display: "images/sagittal.gif";
}
</style>
since ".responsive image" is not apart of your unordered list, you don't need to mention it in CSS. and instead of using the display value, use background. For your CSS code I would just type.
<style>
#frontal:hover {
background: url("images/sagittal.gif") no-repeat;
}
</style>
You can use javascript to do what you want as follow :
<script>
window.onload = WinLoad;
function WinLoad() {
document.getElementById("frontal").addEventListener("mouseover", changeImage);
function changeImage() {
document.getElementById("responsive_image").src = "images/sagittal.gif";
}
}
</script>
Well .. your style says that
"on the hover of the li item ... select the image inside this item".
That's because #frontal:hover .responsive_image is Descendant combinator. I suggest you to have a look on those topics CSS selectors from MDN & CSS Selector Reference from W3schools.
In your HTML structure, I don't think there is a way to do what you want using CSS only because till now there is no supported selectors for parents and grand parents in CSS.
Second thing I want to add is: there's no way to use the display property to change the image itself. Because display property specifies the display behavior of an element itself ... so, more again I suggest you to have a look on this topic CSS display Property.
Now, For your code, I've 2 suggestions:
(1): By make changes to HTML / CSS code
.responsive_right_side_block {
width: 145px;
height: 214px;
background-image: url("https://via.placeholder.com/300/0000FF/808080");
background-repeat: no-repeat;
background-size: contain;
}
#frontal:hover ~ .responsive_right_side_block {
background-image: url("https://via.placeholder.com/300/000000/FFFFFF");
}
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
<div class="responsive_right_side_block"></div>
</ul>
</p>
And then, you can use css to style it as you want.
(2): Using JavaScript mouseover
// select the image using it's class --> it's html collection so we need to specify the first index
let img = document.getElementsByClassName('responsive_image')[0];
// on mouse over of the li element --> the image src will change
document.getElementById('frontal').onmouseover = function () {
img.setAttribute('src', 'https://via.placeholder.com/300/000000/FFFFFF');
}
// on mouse out of the li element --> the image src will return back to what is in html document
document.getElementById('frontal').onmouseout = function () {
img.setAttribute('src', 'https://via.placeholder.com/300/0000FF/808080');
}
<div class="responsive_right_side_block"><img class="responsive_image" height="214"
src="https://via.placeholder.com/300/0000FF/808080" width="145"></div>
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
</ul>
</p>
Related
I have a requirement where in the user can create new list items inspite of having default list items. So The user will be allowed to attach two icon images for the list items to show on hover of list item and on non hover of list item. So, now I want to change the background image to the given URL's in the property of the object that is iterated in ng-repeat. I have been trying using jquery to get the property and its value but couldn't replace with the hover_image URL from the object on hover.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" style="background-image :url('{{event.eventIconUrl}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;">{{event.eventName}}
</li>
</ul>
I want to change the {{event.eventIconUrl}} to {{event.eventHoverIconUrl}} on mouse hover on the list item. Can anyone help me out with this?
You may use ng-mouseenter and ng-mouseleave events.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" ng-init="anyChosenVariableNameForUrls=event.eventIconUrl"
style="background-image :url('{{anyChosenVariableNameForUrls}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;"
ng-mouseenter="anyChosenVariableNameForUrls=event.eventHoverIconUrl"
ng-mouseleave="anyChosenVariableNameForUrls=event.eventIconUrl"
>{{event.eventName}}
</li>
</ul>
Try this:
$('#name img').hover(function() {
$(this).attr('src', 'https://developers.google.com/maps/images/lhimages/api/icon_placesapi.svg');
}, function() {
$(this).attr('src', 'http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="name">
<img title="Hello" src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png" />
</a>
To do it in angular way see this Fiddle
use ng-mouseover and ng-mouseleave directives to detect mouse hover and leave.
I have a <li> element and I'm changing the css class of the <li> element upon click, using the ng-click (setting its controller highlighted holder variable) and ng-class (checking whether the <li> is highlighted in the controller and applying two types of classes for the true/false cases).
however I also need to change the class of the <a> which is a sub-element of the <li> based on the highlighting flag as I need a different text color.
do I create two ng-class tags for the <li> and the <a> inside of it and repeat the condition? or is there a better way?
I mean, it seems excessive to do this:
<li ng-click="navCtrl.setNav(1)" ng-class="{ 'nav_items_selected': navCtrl.isNavPage(1) , 'nav_items': !navCtrl.isNavPage(1) }"><a ng-class="{ 'nav_selected_a': navCtrl.isNavPage(1) , 'nav_a': !navCtrl.isNavPage(1) }" href="#">Dashboard</a></li>
You can use directive for changing the class of li and child a. I think its much better to use directive for handling DOM stuffs. it is also reusable for your future codes. documentation for directive: https://docs.angularjs.org/guide/directive
you can do something like this:
app.directive('changeClass', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.bind('click', function(event) {
var aChild = elem.children('a');
if(!elem.hasClass('active-li')){
elem.addClass('active-li');
aChild.addClass('active-link');
} else {
elem.removeClass('active-li');
aChild.removeClass('active-link');
}
});
}
}
}]);
html
<li change-class class="">
<a href="#" class="">
Dashboard
</a>
</li>
working demo here here
You can probably target your <a> in css without applying another class to it, since you've already done that to its <li> ancestor.
https://jsfiddle.net/tvbL877w/
Let's say you've got this css code:
.selected {
background-color: red;
}
.selected .some-child {
background-color: blue;
}
and your html is something like this:
<ul>
<li ng-class="{selected: myBoolean}">
Let's get some <a href="#" class="some-child" ng-click="myBoolean = !myBoolean" >CAKES!!!</a>
</li>
</ul>
I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to ?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
The dot denotes that the selector is a class. So it will select elements in your page as such:
.awesome-text-box {
}
<div class="awesome-text-box"></div>
Whereas without the dot denotes an element name. Such as:
div {
}
<div></div>
In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:
p.one {
}
// Will find
<p class="one"></p>
// However it will not find
<div class="one"></div>
Whilst I am here I can give you a list of other common selectors too:
#awesome-text-box => <div id="awesome-text-box"></div> => ID
.btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
p > span => <p><span></span></p> => Child
p span => <p><a><span></span></a><span></span> => Descendant (anything below)
p + span => <p></p><span></span> => Sibling
A '.' refers to a class, while a '#' refers to a id.
When neither a '.' or a '#' are used, the CSS will apply the style to an HTML object.
So for p .one and p .two, the CSS will be applied to the '.one' and '.two' classes that exists within the 'p' object.
For a more detailed example;
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
. means a class. You can call that CSS class with HTML
example
<span class="awesome-text-box"> ABCD </span>
and P means <p> tag in HTML you can call
<p class="one"> ABCD </p>
Ref -
http://www.w3schools.com/css/css_selectors.asp
The dot notation is for class and without dot that would not work. The selector name like div, p don't need dot notation. And use hash (#) for the selector with id.
Ex-
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>
#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
Here . is class selector. It means apply style to all elements which has class awesome-text-box ie,
<div class="awesome-text-box"></div>
while without dot it is tag name like you mention in second example p Here p is tag:
<p>Some text</p>
Similarly p.one apply the style to all p tags which has class one. ie,
<p class="one">Some text</p>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to hover over one element and effect a different element?
How to change the div background image,in mouse over the another div,using css .
With the markup you supplied, this is indeed possible with CSS alone:
<a>
<img src="http://placehold.it/100x100" />
<div>
</div>
</a>
You can use the :hover pseudo selector to select the div when the anchor has been hovered
a:hover div
{
background-image: url(http://placehold.it/400x400);
}
This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)
http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/
This will achieve what you're looking for though there are better ways to do this, using sprites and background-position for example. However:
Your HTML
<a class="selector">My Link</a>
Your CSS
.selector {
background-image:url(myImage.jpg);
}
.selector:hover {
background-image:url(myHoverImage.jpg);
}
Jquery solution
HTML
<a class="selector" data-type="bgChanger1">
My Link
</a>
<div data-type="bgChanger1">
...
</div>
JQUERY
$(document).ready(function()
{
var hoverElement = $('.selector'),
dataType = hoverElement.attr('data-type'),
linkedDiv = $('div[data-type="' + data-type + '"]');
hoverElement.hover(function(e)
{
e.preventDefault()
linkedDiv.css('background-image', 'hoverImage.jps');
},
{
linkedDiv.css('background-image', 'normalImage.jpg');
});
});
You can use jquery to do this.
Your markup:
<div id="div1"></div>
<div id="div2"></div>
Your script:
$("#div1").mouseover( function() {
$("#div2").css("background-image", "url('image.png')");
});
just add a jquery script as follows:
$(document).ready(function() {
$('#div1').hover(function(){
$('#div2').css("background","url(image_url)");
});
});
I've been trying to figure out on how to set the current page I'm at to a different background color than the other links, but to no avail.
HTML
<div id="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
What I want is to set the current active link to black, and the other four links to grey. That way if I visit Portfolio, for example, that link is black and the rest are grey. How would I do this?
Thankfully, there is no Javascript involved. HTML and CSS will work fine for this task. First off, let's create your HTML. You obviously know what page you are on, so we are going to add a class to the current page's link. So, for example, if we were on /index.php/home our markup might look similar to this.
<div id="navigation">
<ul>
<li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
Now, before we color the current link we are going to color the rest of the links. We can select the rest of the links via CSS like so.
#navigation a {
}
The following CSS will select all <a> elements that are children of the navigation element. So now we need to set its background color. The CSS property for setting the background color is background-color: xxx. Where xxx is either the hex code, rgb value, or the name of the color. So we would do the following to have all the links grey.
#navigation a {
background-color: #333; /* or whatever grey you want. */
}
This will set every link to the color grey. Now, we need to set the current link to the color black.
If you noticed, we added class="current" to the current link, the home link in this case. Next we need to create the appropriate styling for this. Our CSS declaration will look similar to this.
#navigation .current {
}
The above declaration applies to all elements with the class current that is a child of the element navigation. And so now we set the background color like so.
#navigation .current {
background-color: #000;
}
So, our final CSS would look like so.
#navigation a {
background-color: #333;
}
#navigation .current {
background-color: #000;
}
Note that the order is important! If we were to put the second declaration first, it would be overridden by the, more general, link declaration.
You have two options, you can use PHP and CSS, this is better, because this is client independent.
Second option is to use Javascript and CSS
PHP & CSS
I prefer this way!
You need to check on every site if the current page is equal to each menu link. Here are some snippets of my solution. It works fine for my site.
I don't know if its working with your way for linking: index.php/home. Think you have to adapt it. Because I use real files like home.php and blog.php
this is the menu.php, I include it into every site:
<div id="menu">
<div class="innertube">
<ul>
<?
markIfCurrent("Willkommen", "willkommen");
markIfCurrent("Salzgrotte", "salzgrotte-am-fehn");
markIfCurrent("Heilwirkung", "heilwirkung-des-salzes");
markIfCurrent("Farbtherapie", "farblichttherapie");
markIfCurrent("Salzshop", "salzshop");
markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte");
markIfCurrent("Fragen und Antworten", "fragen-und-antworten");
markIfCurrent("Preise", "preise");
markIfCurrent("Galerie", "galerie");
markIfCurrent("Presse", "presse");
markIfCurrent("Praxis", "praxis");
markIfCurrent("Anfahrt", "anfahrt");
?>
</ul>
</div>
</div>
Now the php functions:
/* filter selected menu items */
function markIfCurrent ($name, $link) {
$should_mark = isCurrent($link);
if ($should_mark) {
$first = strtoupper(substr($name, 0, 1));
$rest = substr($name, 1);
echo "<li><span class='current'>".$name."</span></li>\n";
} else {
echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n";
}
}
/* check if $pageis current page */
function isCurrent ($page) {
/* reverse mapping */
if ($page == "willkommen") {
$page = "index";
}
$isCurrent = $page.".php" == getCurrentPage();
return $isCurrent;
}
function getCurrentPage() {
$path = $_SERVER['PHP_SELF'];
$a = explode("/", $path);
$site_name = $a[sizeof($a)-1];
return $site_name;
}
At least the CSS:
li span.current a {
background-color: black; /* or #000000 */
}
li span a {
background-color: gray; /* or #cccccc*/
}
JavaScript & CSS
This is more pseude code, but its the same logic for the PHP version
In this case you also need to check the current url
with window.location.pathname you get the url / pathname. split on the slash and extract the file.
Then you can iterate through the elements of your navigation with jQuery like $("#navigation").find("a") and then you can set the css style for the a element a.css("background-color", "black")