I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }
Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}
Related
I have a website with side-bar menu. Menu is by default visible. If i click close-btn. Menu is hidden. That works
I would like make menu by default visible for desktops and by default hidden for mobiles.
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 250px;
height: 100vh;
position: fixed;
top: 0;
z-index: 50;
left: 0px;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
.side-bar.non-active {
left: -250px;
}
.side-bar.active {
left: 0px;
}
The window.innerWidth < 850 works but i'm not sure if there is something better. 850px i use for #media queries.
$(document).ready(function () {
//jquery for toggle sub menus
$(".sub-btn").click(function () {
$(this).next(".sub-menu").slideToggle();
$(this).find(".dropdown").toggleClass("rotate");
});
//jquery for expand and collapse the sidebar
if (window.innerWidth > 850) {
$(".close-btn").click(function () {
$(".side-bar").addClass("non-active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("non-active");
$(".menu-btn").css("visibility", "hidden");
});
}
else {
$(".side-bar").css("left", -250);
$(".close-btn").click(function () {
$(".side-bar").addClass("active");
$(".menu-btn").css("visibility", "visible");
});
$(".menu-btn").click(function () {
$(".side-bar").removeClass("active");
$(".menu-btn").css("visibility", "hidden");
});
}
});
The issue is propably in $(".side-bar").css("left", -250); because in the DOM i can see it as inline style and after click nothing happen. Only .menu-btn disappers.
Is there another way how to set "reverse" logic for mobiles please? Or maybe just easy fix this i hope little bug?
I tried set oposite style for left: -250px; to left:0; via following logic but without any positiv result..
Use this instead:
if (window.matchMedia('(max-width: 850)').matches) { ... }
else { ... }
This uses css media query in JavaScript without any frameworks.
I am making a map area + svg interactive map. The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear. Does anybody know how to solve this?
CSS:
.eu {
position: absolute;
top: -80px;
left: -80px;
display: none;
width: 1200px;
height: 1200px;
z-index: 300;
}
.visible {
display: block;
pointer-events: all;
}
jQuery:
$('#eumap').mouseover(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseout(function () {
$('.eu').removeClass('visible');
});
$('#apmap').mouseover(function () {
$('.ap').addClass('visible');
});
$('.ap').mouseout(function () {
$('.ap').removeClass('visible');
});
There is too much svg to copy, so here is a little DEMO
You can add to your CSS...
text {
pointer-events: none;
}
See https://jsfiddle.net/g04qhcw9/
The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear.
That’s because you are using mouseover/mouseout – they fire again each time you move the mouse over child elements. (See Jquery mouseenter() vs mouseover() for details.)
Simply use mouseenter/mouseleave instead:
$('#eumap').mouseenter(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseleave(function () {
$('.eu').removeClass('visible');
});
https://jsfiddle.net/g04qhcw9/1/
I need to change an image of one div while hovering over another. So far i have this
$('#button').on({
'hover': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
DEMO
But it doesn't work..
EDIT While it works in fiddle, the solution does not work in my local file.
Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful
As of 1.9, the event name string "hover" is no longer supported as a
synonym for "mouseenter mouseleave". This allows applications to
attach and trigger a custom "hover" event. Changing existing code is a
simple find/replace, and the "hover" pseudo-event is also supported in
the jQuery Migrate plugin to simplify migration. Reference
$('#button').on({
'mouseenter': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
$('#button').on({
'mouseleave': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
}
});
If you still want to use hover events then there is direct hover function provided by jQuery, with reference
$( "td" ).hover(
function() {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}, function() {
// change to default on hover out
}
);
Looks like you need to change it on mouseover and reset on mouseout. If you use data-* attribute it will be easier.
$('#button').hover(function() {
var img = $('#ekranasStatic').data('toggle-src');
$('#ekranasStatic').attr('src', img);
}, function() {
var img = $('#ekranasStatic').data('original-src');
$('#ekranasStatic').attr('src', img);
});
.img {
/*** TURI BUT 850 PX **/
position: absolute;
margin-left: 520px;
top: 110px;
z-index: 99;
}
#button {
width: 50px;
height: 70px;
display: block;
position: absolute;
top: 296px;
left: 1120px;
background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
z-index: 2200;
cursor: pointer;
}
#button:focus {
outline: none;
}
#button:hover {
animation: knopke 0.1s steps(2);
animation-fill-mode: forwards;
background-position: 0 0;
}
#keyframes knopke {
to {
background-position: -100px;
opacity: 1;
}
}
#ekranasStatic {
width: 735px;
height: 602px;
display: block;
position: absolute;
top: 120px;
left: 375px;
z-index: 10000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
<img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
/>
</div>
Updated Fiddle
change this
$('#button').on({
'hover': function(){
to :
$('#button').hover({ function(){ });
try this :
$('#button').on('hover', function () {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
);
Js Fiddle Updated
I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.
Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.
I have a invisible div that on top z-index which I want to act as a clicktag button. But it does not get any mouse event I try to associate with it. Neither it does show the hand pointer specified with css.
This is the example: http://www.miguelrivero.net/test/MS-20_mini/index.html
As you can see I'm using this simple code (just focus on console.log's):
function bgExitHandler(e) {
Enabler.exit("Background Exit");
console.log("click");
}
function onMouseHandler(e) {
console.log("click");
}
document.getElementById("bg-exit").addEventListener("click", bgExitHandler, false);
document.getElementById("bg-exit").addEventListener("onmouseover", onMouseHandler, false);
This is the css:
#bg-exit {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: pointer;
opacity: 0;
}
Any light on this, please?
Thanks!
If you are using addEventListener, the name of the event is just mouseover, not onmouseover:
i.e.
document.getElementById("bg-exit").addEventListener("mouseover", onMouseHandler, false);