Pseudo selector like :hover doesn't work in QwebView

tngarsel

why pseudo selector like :hover doesn't work normaly in QwebView with Qt4.8.x ? If is like that, is there any solution without use javaScript ?

SGaist

Hi and welcome to devnet,

That is a bit vague for a question. You should explain your exact problem.

Also note that Qt 4.1 is pretty outdated.

tngarsel

my problem is that, when i use :hover pseudo selector to attribute some style to a html element, nothing is done when mouse is over that elemnent. It only work when use javaScript event. It is a problem for me when i write html, css and javaScript file before implement it with Qt for a html5 application.

ps: forgive my english language. Normaly i am francophone ! :)

tngarsel

sorry it was 4.8.1 not 4.1! 4.8.1 is the available download version in Ubuntu 12.04

SGaist

Just to be sure I'm understanding you correctly, you're thinking about the css selector ?

Can you provide a minimal example that shows the behavior ?

tngarsel

Thank for the interrest that you have for my post. I really appreciate it.

this is the main code in my Qt creator.
@#include <QApplication>
#include <QProcess>
#include <QWebFrame>
#include "html5applicationviewer.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

Html5ApplicationViewer viewer;
viewer.setOrientation(Html5ApplicationViewer::ScreenOrientationAuto);
viewer.showExpanded();
viewer.loadFile&#40;QLatin1String("umi_firsts_apps_installer/index.html"&#41;);
viewer.showMaximized();

QProcess process;
process.startDetached("/bin/sh", QStringList()<< "myScript.sh");

return app.exec();

}
@

I want to builld a html5 application because i allready make a web pages and i don't want to rewrite it interface with another language. The thing that i try to do, is to associate c++ code with javaScript for manage some functionnality of the application. The template of web pages load very well in a browser like firefox etc; but with QWebView object, like you can see in this code line,
viewer.loadFile(QLatin1String("umi_firsts_apps_installer/index.html"));
javaScript event like mouseover and mouseout don't work. In the same, when i use css selectors with :hover, nothing is happen when mouse is over the corresponding html element.
@
[removed]
var appLabels = document.getElementsByTagName("label") ;
var buttons = document.getElementsByTagName("button") ;

for( var i=0, c=appLabels.length; i<c; i++)
{
appLabels[i].onmouseover = function(){ this.className = "list-hover" ; } ;
appLabels[i].onmouseout = function(){ this.className = "" ; } ;

for( var i=0, c=buttons.length; i<c; i++)
{
buttons[i].onmouseover = function(){ this.className = "button-hover" ; } ;
buttons[i].onmouseout = function(){ this.className = "" ; } ;
}

[removed]

-----css eggs

button
{
padding: 10px ;
background: #FF721C ;
border: none ;
border-radius: 20px ;
font-family: Ubuntu, sans ;
font-size: 15px ;
color: white ;
}
button:hover
{
box-shadow: 0px 0px 7px white ;
font-size: 16px ;
transition: all 0.3s linear;
}
@

The JavaScript instructions or the css descriptions in the corresponding event are just execute with the cliked event in my "viewer" object. Normaly its have to be execute with mouseover or mouseout event like we can see to the implementation.

Is there any way to make it work correctly?

SGaist

Are both your css and javascript embedded in your html ?

tngarsel

no! they are in separated files

tngarsel

Hi! After some analyse, i try to use QWebView object to open the "index.html" file of my application and everything work fine.
@ QWebView *view = new QWebView() ;

view->resize(800, 600);
//view->page()->mainFrame()->addToJavaScriptWindowObject("testWidget", new QObject );
view->load(QUrl("umi_firsts_apps_installer/index.html"));
    view->show();@

in remplacement to
@ Html5ApplicationViewer viewer;
viewer.setOrientation(Html5ApplicationViewer::ScreenOrientationAuto);
viewer.showExpanded();
viewer.loadFile(QLatin1String("umi_firsts_apps_installer/index.html"));
viewer.showMaximized();@

Actually, i am a beginner in Qt. When i see the implementation of "html5applicationviewer" class which is generated by Qt creator when created the html5 application projet, QWebView Object is also use; it seems like "html5applicationviewer" is not an inherited class of "QWebView" but a QWidget inherited class like "QWebView". Then it can be normal the different result that i have with a "QWebView" object and "html5applicationviewer" object.

i believed that a "html5applicationviewer" Object is also a "QWebView" object by heritage. So i have made a mistake.

ps: forgive my english language. Normaly i am francophone ! :)

SGaist

It uses a QGraphicsWebView rather than a QWebView but that shouldn't make a difference.

What happens if you use loadUrl rather than loadFile ?